OAuth机制_web站点接入微软azure账号进行三方登录

文章目录

    • ⭐前言
    • ⭐微软三方登录流程
      • 💖 web站点获取微软账号流程
      • 💖 node封装微软登录接口
      • 💖 webapp 自定义code换token
      • 💖 调用 Microsoft Graph API
      • 💖 前端唤醒authlink进行登录回调逻辑
    • ⭐结束

yma16-logo

⭐前言

大家好,我是yma16,本文分享OAuth规则机制下实现个人站点接入微软azure账号进行三方登录。
该系列往期文章:
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录

oauth授权

OAuth是一种授权机制,用于允许用户(资源所有者)向第三方应用程序授予有限的访问权限,而不必将凭证直接提供给第三方应用程序。OAuth的目的是为了保护用户的私密数据,如社交媒体帐户、云存储、银行帐户等。它通过一个流程,将用户授权给第三方应用程序访问用户的资源,而不需要第三方应用程序获得用户的凭证信息。这样做可以减少用户数据泄露的风险。OAuth是一个开放的标准,由OAuth工作组维护,并得到许多组织的支持和使用。

oauth的发展

OAuth协议的发展历史可以追溯到2004年,当时美国国防部提出了一个名为“OpenID Connect”的开放式身份认证和授权标准,旨在解决Web 2.0中的身份认证和授权问题。OAuth1.0于2005年被RFC 5849正式标准化,OAuth2.0于2011年被RFC 6749正式标准化 。

OAuth1.0的主要特点是将用户的认证信息(如用户名和密码)与第三方应用的请求分离开来,从而提高了安全性。
OAuth2.0则在OAuth1.0基础上进一步改进,增加了更多的功能和灵活性,如授权码模式、隐式模式、密码模式等 。

效果
azure-web-auth

⭐微软三方登录流程

前提条件:存在前端站点
注册微软应用:https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationsListBlade
创建appid
azure-app
提交审核.

💖 web站点获取微软账号流程

流程文档:https://learn.microsoft.com/zh-cn/azure/active-directory/develop/v2-oauth2-auth-code-flow
官方接入流程图:
azure
接入步骤:

  1. 唤起三方登录授权url
  2. 登录成功返回定义的回调地址redirect_uri带code
  3. 使用code去换取token
  4. token拿到id和refreshToken
  5. 使用refreshToken去访问 Microsoft graph api

web 登录身份验证流
web-auth
单页面应用spa交互流程
交互流程
zh-script

💖 node封装微软登录接口

组装三方url
封装url的函数,已处理脱敏

const request = require('request');

// Microsoft 帐户和工作或学校帐户的 common
const tenant='common';
const loginUrl=`https://login.microsoftonline.com/${tenant}/oauth2/v2.0/authorize`;
const codeToTokenUrl=`https://login.microsoftonline.com/${tenant}/oauth2/v2.0/token`;
const aboutInfoUrl='https://graph.microsoft.com/v1.0/me';
// 客户端id
const clientId='***';
// 对象id
const objectId='***';
const redirect_uri='https://yongma16.xyz/third-login/azure_login_callback';
const getAzureAuthUrl=(state)=>{
    return new Promise(resolve=>{
        //code_challenge=pmwq-hZFKj0arSiO6WXFHngszqW0cH0fwMpd-a1Vuns&code_challenge_method=S256
        const params={
            client_id:clientId,
            scope:['User.Read'].join(encodeURIComponent('&')),
            redirect_uri:encodeURIComponent(redirect_uri),
            // 返回的方式
            response_mode: 'query',
            response_type:'code',
            code_challenge:'***',
            code_challenge_method:'S256',
            state:state?state:'myblog',
        };
        const path=Object.keys(params).map(key=>{
            return `${key}=${params[key]}`
        }).join('&');
        const url=loginUrl+'?'+path;
        resolve(url)
    })
};

封装code换取token的函数
注意:

  • redirect_uri不进行encode
  • spa需要code_verifier
  • webapp 需要secrect
const getAzureToken=(code)=>{
    return new Promise(async ( resolve ,reject)=> {
        const formData={
            client_id:clientId,
            scope:['User.Read'].join(encodeURIComponent('&')),
            code:code,
            redirect_uri:redirect_uri,
            // redirect_uri:encodeURIComponent(redirect_uri),
            grant_type:'authorization_code ',
            code_verifier: '***',
            client_secret:'***',
        }
        console.log('formData',formData)
        request.post({url:codeToTokenUrl, formData: formData}, function optionalCallback(err, httpResponse, body) {
            if (err) {
                console.error('upload failed:', err);
                reject(err)
            }
            console.log('Upload successful!  Server responded with:', body);
            resolve(httpResponse)
        });
        }
    )
}

client_secret获取
web-secret
效果调用有问题:
反馈 只能通过跨源请求兑换

Tokens issued for the 'Single-Page Application' client-type should only be redeemed via cross-origin requests

封装token换取id_token的函数

// 获取web api
const getAzureUserInfo=(access_token)=>{
    const Authorization="Bearer " + access_token;
    return new Promise(async ( resolve ,reject)=> {
            request(
                {
                    method: 'GET',
                    uri: aboutInfoUrl,
                    headers:{
                        'Authorization':Authorization
                    }
                }, function (error, response) {
                    console.log('response',response)
                    if (!error && response.statusCode === 200) {
                        resolve(response)
                    } else {
                        console.log("error",error);
                        resolve(reject)
                    }
                })
        }
    )
}

💖 webapp 自定义code换token

由于只能通过跨源请求兑换
解决方案:
切换为调用 Microsoft Graph API的demo,使用对外暴露接口让web使用就可以切换token

💖 调用 Microsoft Graph API

spa使用Microsoft Graph API
链接直达:https://learn.microsoft.com/zh-cn/azure/active-directory/develop/tutorial-v2-javascript-auth-code

个人demo示例:https://yongma16.xyz/node_azure/
demo-azure

💖 前端唤醒authlink进行登录回调逻辑

步骤:

  1. 拿到微软三方登录url
  2. 登录成功回调code
  3. 使用code换token
  4. token拿openid
 async azureLogin () {
     try {
         const that = this
         // qq
         const res = await that.getAzureUrl()
         console.log('res azureLogin', res)
         if (res.data && res.data.data) {
             const resData = res.data.data
             console.log('resData', resData)
             if (res.data.code === 200) {
                 let url = resData
                 console.log('url', url)
                 const openHandle = window.open(url, 'width:800px;height:700px', '_black')
                 console.log('openHandle', openHandle)
                 window.onmessage = async (res) => {
                     const {origin, data} = res
                     if (origin.includes('yongma16.xyz')) {
                         const {code, state} = data
                         console.log('code state', code, state)
                         that.thirdLoginConfig.qCode = code
                         that.thirdLoginConfig.qState = state
                         if (openHandle) {
                             openHandle.close()
                         }
                         if (code) {
                             await that.getAzureToken(code)
                         }
                     }
                 }
             }
         }
         return new Promise(resolve => {
             resolve(true)
         })
     } catch (e) {
         return new Promise((resolve, reject) => {
             reject(e)
         })
     }
 },
 getAzureUrl () {
     return new Promise(async (resolve, reject) => {
         try {
             const azureAuthUrl = '/third-login/getAzureAuthUrl'
             const azureRes = await this.$axios.get(azureAuthUrl)
             console.log('azureRes', azureRes)
             resolve(azureRes)
         } catch (e) {
             reject(e)
         }
     })
 },
 async getAzureToken (code) {
     try {
         const azureAuthTokenUrl = '/third-login/getAzureToken'
         const params = {
             code
         }
         const azureRes = await this.$axios.get(azureAuthTokenUrl, {params})
         console.log('azureRes', azureRes)
     } catch (e) {
         console.log('e', e)
     }
 },

效果:
login-azure

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
blue-sky-boy

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 感谢你的阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/51736.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深度学习论文: Q-YOLO: Efficient Inference for Real-time Object Detection及其PyTorch实现

深度学习论文: Q-YOLO: Efficient Inference for Real-time Object Detection及其PyTorch实现 Q-YOLO: Efficient Inference for Real-time Object Detection PDF: https://arxiv.org/pdf/2307.04816.pdf PyTorch代码: https://github.com/shanglianlm0525/CvPytorch PyTorch代…

【论文笔记】神经网络压缩调研

神经网络压缩调研 背景现有的深度模型压缩方法NetWork Prunning 网络剪枝设计结构化矩阵知识蒸馏权值共享Parameter Quantization(参数量化)量化和二进制化伪量化Architecture Design(Depth Separable Convolution)分解卷积 背景 …

matlab Tabel操作

https://zhuanlan.zhihu.com/p/104266351 Table数据类型的引用要三点要注意: 1){}–花括号(curly braces),()–小括号(parentheses), .–圆点(dot)对Table类型数据的作用…

Qt实现思维导图锦集

序号简述文章导航1思维导图树形结构、不重叠且均匀分布、支持折叠和展开核心树2菜单按钮风格、菜单提示风格、侧滑菜单、侧滑功能窗口UI设计3支持JPEG、PNG、XML、JSON、PDF、SVG格式文件数据导入导出4支持撤销回撤功能、显示节点操作流程、点击可跳转历史撤销回撤5思维导图横向…

AB 压力测试

服务器配置 阿里云Ubuntu 64位 CPU1 核 内存2 GB 公网带宽1 Mbps ab -c100 -n1000 http://127.0.0.1:9501/ -n:在测试会话中所执行的请求个数。默认时,仅执行一个请求。 -c:一次产生的请求个数。默认是一次一个。 ab -c 100 -n 200 ht…

opencv-25 图像几何变换04- 透视 cv2.warpPerspective()

什么是透视? 透视是一种几何学概念,用于描述在三维空间中观察物体时,由于视角的不同而产生的变形效果。在现实世界中,当我们从不同的角度或位置观察物体时,它们会呈现出不同的形状和大小。这种现象被称为透视效果。 透…

list与sort()

运行代码: //list与sort() #include"std_lib_facilities.h" //声明Item类 struct Item {string name;int iid;double value;Item():name(" "),iid(0),value(0.0){}Item(string ss,int ii,double vv):name(ss),iid(ii),value(vv){}friend istre…

【计网】TCP在可靠传输中都干了啥

文章目录 1、概述2、校验和3、序列号和确认应答机制4、重传机制4.1、介绍4.2、超时重传4.3、快速重传 5、滑动窗口协议5.1、介绍5.2、发送方的滑动窗口5.3、接收方的滑动窗口 6、流量控制7、拥塞控制7.1、介绍7.2、慢开始7.3、拥塞避免7.4、快重传和快恢复 1、概述 TCP 是面向…

lib-flexible修改配置适配更多不同分辨率

找到设置宽度的地方 然后根据你的屏幕最大多大呀&#xff0c;最小多小呀设置一下 if (width / dpr < 1980) { width 1980 * dpr; } else if (width / dpr > 5760) { width 5760 * dpr; }

https://app.hackthebox.com/machines/Sau

https://app.hackthebox.com/machines/Sau https://app.hackthebox.com/machines/Sau1.info collecting └─$ nmap -A 10.10.11.224 -T4 Starting Nmap 7.93 ( https://nmap.org ) at 2023-07-30 15:36 HKT Nmap scan report for 10.10.11.224 (10.10.11.224) Host is up (…

全局ip代理安全吗? 手机设置全局代理方法详解

全局IP代理并不一定是安全的&#xff0c;因为全局IP代理会将所有网络流量都通过代理服务器进行转发&#xff0c;包括敏感信息和隐私数据。如果代理服务器受到黑客攻击或存在安全漏洞&#xff0c;可能会导致数据泄露和其他安全问题。因此&#xff0c;在使用全局IP代理时&#xf…

Spring Boot实践四 --集中式缓存Redis

随着时间的积累&#xff0c;应用的使用用户不断增加&#xff0c;数据规模也越来越大&#xff0c;往往数据库查询操作会成为影响用户使用体验的瓶颈&#xff0c;此时使用缓存往往是解决这一问题非常好的手段之一。Spring 3开始提供了强大的基于注解的缓存支持&#xff0c;可以通…

【Leetcode】62.不同路径

一、题目 1、题目描述 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” )。 问总共有多少条不同的路径? 示例1: 输入:m = 3, n = 7 输出:…

AD21原理图的高级应用(六)原理图设计片段的使用

&#xff08;六&#xff09;原理图设计片段的使用 Altium Designer 的片段功能可以很方便地重复使用一些单元模块,其中包括原理图的电路模块、PCB(包括布线)和代码模块。例如在工程中需要设计电源模块,而别的工程中又恰好有比较完善的电源模块,这时就可以通过片段功能重复地使用…

京东技术专家首推:Spring 微服务架构设计,GitHub 星标 128K

前言 本书提供了实现大型响应式微服务的实用方法和指导原则&#xff0c;并通过示例全面 讲解如何构建微服务。本书深入介绍了 Spring Boot、Spring Cloud、 Docker、Mesos 和 Marathon&#xff0c;还会教授如何用 Spring Boot 部署自治服务&#xff0c;而 无须使用重量级应用服…

03_使用execle表生成甘特图

背景 每次排期都需要话很多时间 很可能排期还不对头 这时候需要一个表能看到 1.什么时候项目结束 开始 转阶段 2.当前手上的活能不能做完 当前阶段手上有多少活 3.产品经理每次修改完计划迅速排期 甘特图生成 execle表生成 1.需要使用亿图创建甘特图 2.把当前的甘特图数据进…

TextClamp for Vue3.0(Vue3.0的文本展开收起组件)

呦&#xff01;大家好&#xff0c;好久没有更新博客了&#xff0c;最近实现了一个一直想自己完成的一个东西&#xff0c;就是文本的展开收起组件&#xff0c;以前项目需要用到&#xff0c;自己实现一个又太繁琐&#xff0c;所以那个时候都是用的别人的轮子&#xff0c;现在自己…

在Ail Linux中手动配置IPv6

第一步&#xff0c;登录阿里云服务器控制台&#xff0c;在“概览”页面找到对应实例&#xff0c;然后单击实例ID。 第二步&#xff0c;在“实例详情”页面中的“网络信息”栏目中&#xff0c;可以发现“IPv6 地址”中没有数据&#xff0c;然后单击“专有网络”的专有网络ID。 第…

Pandas进阶修炼120题-第三期(金融数据处理,51-80题)

目录 往期内容&#xff1a;第一期&#xff1a;Pandas基础&#xff08;1-20题&#xff09;第二期&#xff1a;Pandas数据处理&#xff08;21-50题&#xff09; 第三期 金融数据处理51.使用绝对路径读取本地Excel数据方法一&#xff1a;双反斜杠绝对路径方法二&#xff1a;r 拓展…

TypeScript算法题实战——剑指 Offer篇(5)

目录 一、平衡二叉树1.1、题目描述1.2、题解 二、数组中数字出现的次数2.1、题目描述2.2、题解 三、数组中数字出现的次数 II3.1、题目描述3.2、题解 四、和为s的两个数字4.1、题目描述4.2、题解 五、和为s的连续正数序列5.1、题目描述5.2、题解 六、翻转单词顺序6.1、题目描述…