社区首页 >专栏 >从微信网页授权到OAuth 2.0

从微信网页授权到OAuth 2.0

娜姐

发布于 2020-09-22 02:30:02

2K00

代码可运行

文章被收录于专栏：娜姐聊前端娜姐聊前端

运行总次数：0

代码可运行

相信你使用某些APP需要做登录操作，那么，有可能会出现“微信登录”的按钮。点击该按钮，会跳转到如下页面：

w-login.jpeg

当然，我们的前提是通过H5页面登录。那么，此时只需要“确认登录”，那么，返回应用后该应用会获得你的部分微信账户信息，比如头像，用户名等。然后，在应用APP中，你可以看到自己的微信头像。

整个流程，就是一个OAuth 2.0登录。下面，我们从微信文档开始，开启OAuth 2.0之路。

1. 微信网页授权

文档链接：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

关于网页授权回调域名的说明 ... 2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com 无法进行OAuth2.0鉴权

可以肯定，微信网页授权采用的就是OAuth 2.0标准。

第一步：三方应用的H5页面向微信发起授权申请

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

wechat.jpg

appid就是三方应用在微信开发平台/公众号注册的应用ID。只有是授权提供方的注册用户，三方应用才有可能使用授权能力。
redirect_uri指定了微信授权成功后，需要重定向到哪里

第二步：授权成功，微信重定向到 `redirect_uri`，并在URL上携带`code`。

H5通过接口将code传给服务端，最后，服务端通过code换取网页授权access_token，完成登录操作。

大多数三方应用，都有自己的用户系统。那么，微信授权之后，最终映射到应用的用户系统，完成session和token的生成。

上面两个步骤的代码如下：

componentDidMount() {
        const query = parseUrlSearch();
        const { code } = query;
        this.code = code;
        if (!query) {
            return;
        }
        if (isWechat()) {
            this.componentDidMountForWechat(code);
        }
    }

componentDidMountForWechat(code) {
        if (code) {
            // 向服务端发起请求：先登陆，更新cookie，再拉取列表信息
            wechatLogin(code, 'login,register,login').then(response => {
                const { errorCode, data } = response.data;
                if (errorCode === 0) {
                    setCookies('token', data.token);
                    setCookies('sessionId', data.session);
                }
               ...
            })
        }
        else {
            const appid = 'xxxxxxxxx',
                redirect_uri = encodeURIComponent(window.kk),
                scope = 'snsapi_userinfo',
                state = Math.round(Math.random() * 1000000000)
            window.kk = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
        }
    }

2. 理解OAuth 2.0

有了微信网页授权的经验，那么，就不难理解OAuth 2.0了。

OAuth是一个关于授权（authorization）的开放网络标准 OAuth在"客户端"与"服务提供商"之间，设置了一个授权层（authorization layer）。 "客户端"不能直接登录"服务提供商"，只能登录授权层，以此将用户与客户端区分开来。 "客户端"登录授权层所用的令牌（token），与用户的密码不同。用户可以在登录的时候，指定授权层令牌的权限范围和有效期。 "客户端"登录授权层以后，"服务提供商"根据令牌的权限范围和有效期，向"客户端"开放用户储存的资料。

我们来看看OAuth 2.0运行流程：