OAuth2第三方登陆实践

时间 2020-07-09

标签 oauth2 oauth 第三方登陆实践繁體版

原文原文链接

OAuth2 是一个开放受权标准，旨在让用户容许第三方应用去访问该用户在某服务器中的特定私有资源，而能够不提供其在某服务器的帐号密码给到第三方应用。html

一、受权流程

四大角色

Resource Owner：资源全部者
Resource Server：资源服务器
Client：第三方应用客户端
Authorication Server：受权服务器
jquery

流程

一、第三方应用发起Authorization Request，通常须要提供如下参数（受权许可类型为受权码Authorization Code时）：
a) response_type：必选。值固定为code。
b) client_id：必选。第三方应用的标识ID。
c) state：推荐。Client提供的一个字符串，服务器会原样返回给Client。
d) redirect_uri：必选。受权成功后的重定向地址。
e) scope：可选。表示受权范围
web

二、用户受权登陆后，第三方应用会获取到一个Authorization Grant（受权许可），受权许但是一个表明资源全部者受权（访问受保护资源）的凭据，客户端用它来获取访问令牌。ajax

三、第三方拥有受权许可后，提供如下参数请求Authorization Server（受权许可类型为Authorization Code时）:
a) grant_type：必选。固定值authorization_code。
b) code: 必选。Authorization Response 中响应的code。
c) redirect_uri：必选。必须和Authorization Request中提供的redirect_uri相同。
d) client_id：必选。必须和Authorization Request中提供的client_id相同。
json

四、Authorization Server会返回以下典型的信息：
a) access_token：访问令牌。
b) refresh_token：刷新令牌。
c) expires_in：过时时间。
api

具体可参考[认证 & 受权] 1. OAuth2受权安全

二、微信第三方登陆

前置准备

在微信开放平台注册开发者帐号，并拥有一个已审核经过的网站应用，并得到相应的AppID和AppSecret，申请微信登陆且经过审核后，而且设置好回调域名（不带协议），可开始接入流程。bash

受权流程

一、第三方发起微信受权登陆请求，微信用户容许受权第三方应用后，微信会拉起应用或重定向到第三方网站，而且带上受权临时票据 code参数。
ps： code是第三方用来获取 access_token的， code的超时时间为10分钟，一个 code只能成功换取一次 access_token即失效。 code的临时性和一次性保障了微信受权登陆的安全性。

二、经过code参数加上AppID和AppSecret等，经过API换取access_token（接口调用凭证）。
服务器

三、经过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操做。
微信

代码实现

export function oauthRedirect(scope = 'snsapi_userinfo', state = 'wechat') {
    //  已经受权过的能够不用受权了 过时code 须要清空
    if (code) {
       return
    }
    let callbackUrl = encodeURIComponent(window.location.href)
    const host = `https://open.weixin.qq.com/connect/oauth2/authorize`
    let url = `${host}?appid=${APPID}&redirect_uri=${callbackUrl}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
    window.location.href = url
}
复制代码

其中redirect_uri为登陆以后的回调地址，要与在网站应用里设置的回调域名一致，不然会报错；scope为受权做用域，表明用户受权给第三方的接口权限（选择的是snsapi_userinfo，获取用户我的信息）；state用于保持请求和回调的状态，受权请求后原样带回给第三方。

用户容许受权后，将会重定向到redirect_uri的网址上，而且带上code和state参数，若用户禁止受权，则重定向后不会带上code参数，仅会带上state参数。
具体信息可见微信官方文档。

三、微博第三方登陆

前置准备

经过新浪微博开放平台去注册一个应用，拿到App Key，同时设置好受权回调地址。

受权流程

一、第三方发起微博受权登陆请求，微博用户容许受权第三方应用后，微博会拉起应用或重定向到第三方网站，而且带上受权临时票据code参数。

二、经过code参数加上client_id和client_secret等，经过API换取access_token（接口调用凭证）。

三、经过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操做。

代码实现

export function weiboOauthRedirect() {
    if (code) {
        return
    }
    let callbackUrl = encodeURIComponent(window.location.href)
    const host = `https://api.weibo.com/oauth2/authorize`
    let url = `${host}?state=wb&client_id=${APPID}&response_type=code&redirect_uri=${callbackUrl}?`
    window.location.href = url
}
复制代码

具体参数信息可见微博官方文档

三、google第三方登陆

前置准备

经过Google APIs控制台去建立一个项目，选择建立凭据 -> OAuth 客户端 ID -> 网页应用，以后输入 JavaScript 来源、重定向 URI，拿到的客户端ID用于后续操做。

受权流程

一、第三方发起google受权登陆请求，google用户容许受权第三方应用后，google会拉起应用或重定向到第三方网站，回调函数中传回code参数。

二、经过code参数加上client_id和client_secret等，经过API换取access_token（接口调用凭证）。

三、经过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操做。

具体信息可见google官方文档。

代码实现

// 首先须要先进行初始化
start() {
    $scriptjs(['https://apis.google.com/js/api:client.js'], () => {
        let gapi = window.gapi
        gapi &&
            gapi.load('auth2', () => {
                this.auth2 = gapi.auth2.init({
                    client_id: client_id,
                    cookiepolicy: 'single_host_origin',
                    scope: 'profile'
                })
            })
    })
}
// 获取google受权并进行登陆
jumpGoogle() {
    if (this.auth2) {
        this.auth2
            .grantOfflineAccess()
            .then(async authCode => {
                let res = await googleLogin(authCode.code)
                res && this.handleRegister(res)
            })
            .catch(e => {
                e.msg && this.$toast(e.msg)
            })
    } else {
        this.$toast('您的装置暂不支持Google Play服务')
    }
},
复制代码

具体信息可见google官方文档

四、Facebook 第三方登陆

前置准备

经过facebook开发者平台去注册一个应用，拿到App Key，同时设置好受权回调地址（仅支持https）。

受权流程

一、第三方发起facebook受权登陆请求，facebook用户容许受权第三方应用后，facebook会拉起应用或重定向到第三方网站，而且带上受权临时票据code参数。

二、经过code参数加上client_id和client_secret等，经过API换取access_token（接口调用凭证）。

三、经过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操做。

代码实现

export function facebookOauthRedirect(cb) {
    if (code) {
        return
    }
    // 先要判断是是否能访问外网
    let callbackUrl = encodeURIComponent(window.location.href)
    const host = `https://www.facebook.com/dialog/oauth`
    let url = `${host}?client_id=${clientId}&redirect_uri=${callbackUrl}&code=acgon&state=fb`
    $scriptjs(['https://code.jquery.com/jquery-3.1.1.min.js'], () => {
        window.jQuery.ajax({
            type: 'GET',
            dataType: 'jsonp',
            url: 'https://m.facebook.com/dialog/oauth',
            timeout: 2000,
            complete: function(XMLHttpRequest) {
                if (XMLHttpRequest.status === 200) {
                    window.location.href = url
                } else {
                    cb()
                }
            }
        })
    })
}
复制代码

具体信息可见facebook官方文档