【第三方 授权】网页第三方授权

0、通用流程

（1）去第三方填写必要的材料，申请获取需要的信息（比如appid，appsecret等），如果需要打通app和网页应用（或多个网页应用之间打通），也需要去指定地方申请打通
（2）通过第三方提供的sdk，或者我们自己的一个中转网址，跳转到第三方的网址并带上指定的参数
（3）第三方网址通过网址参数，得知我们应用身份，用户登录第三方的账户后，第三方会带上参数回调到我们的回调网址
（4）在我们回调网址上拿去参数（类似一次性使用的code）后，配合appid、appsecret等，调用接口，可以获取用户的唯一身份标识（openid之类，但openid只能用于识别单个应用中用户身份唯一，对于需要打通的，需要通过unionid作为打通的唯一身份标识，同一个用户在不同应用间的openid不同）

 

1、微信授权

（1）使用场景：
微信内网页（通过浏览器头信息判断）使用微信公众号做授权，
pc网页上使用二维码扫一扫微信登录的为微信开放平台的网页应用（如果有多个选项，一般提供给用户自行选择），
手机浏览器打开，一般来说前两种方式都不合适，通常手机浏览器就隐藏微信授权登录入口

（2）资料填写与申请：
微信公众号：
微信公众平台申请认证的服务号（服务号功能比订阅号齐全），
如果需要和app打通，或者多个公众号之间打通，申请完服务号之后，去微信开放平台填写资料绑定（app和网页可以多个绑定在一起，但有一定上限）

网页应用：
去微信开放平台填写资料申请网页应用，多个应用（和app）的绑定也是在微信开放平台（app和网页可以多个绑定在一起，但有一定上限）

（3）代码接入：
第一步：跳转第三方

微信公众号：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
通常为，混编或者我们跳转到我们自己的中转地址，由php代码直接先通过接口获取需要用的参数，然后拼接好地址，跳转到第三方（例如，交友项目里授权常会引入的auth.php文件，具体不赘述，主要为后端处理，有兴趣的可以看参考文档或者我们自己的代码）

需要注意的是：snsapi_base和snsapi_userinfo，分为2种授权模式，snsapi_base为静默授权，最终只能拿到用户的openid而无法获取到其它信息比如用户头像、昵称、性别、城市等等，snsapi_userinfo需要用户同意（如果用户不同意，iOS会直接退出内嵌浏览器界面，Android会白屏，且无法对此情况处理，所以只需考虑用户同意授权情况），可以拿到openid、unionid（如果有打通多个应用）、昵称、性别、省份、城市、国家、头像信息。

微信开放平台网页应用：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

微信开放平台提供sdk，
（1）在页面中先引入如下JS文件（支持https）：
http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
（2）在需要使用微信登录的地方实例以下JS对象：
var obj = new WxLogin({
  self_redirect: true,
  id: "login_container",
  appid: "",
  scope: "snsapi_login",
  redirect_uri: "",
  state: "",
  style: "",
  href: ""
});
具体参数参考文档说明，除了固定的参数，和应用相关的参数一般从配置读取或者从后端接口获得

第二步：第三方回调

第三方回调的时候，会带上临时票据code，5-10分钟内有效，只可使用一次，一般这个回调地址也会由php负责处理，获取到code后，通过接口验证票据有效性，并获取需要的信息，openid和其它用户信息等，一般回到我们页面的时候已经获取到需要使用的信息，可以通过页面变量获取到，或者我们自己服务的token和后端进行交互了

 

2、QQ授权

（1）使用场景：没有限制，有网页的地方就可以用，通常在QQ（手机客户端，通过浏览器头信息判断）里，如果有QQ授权选项就默认走此通道，不用给用户选择（官方说法，还有专门的jssdk可用，以现有经验来说用一套即可）

（2）资料填写与申请：
QQ互联申请网站应用，可能需要放代码段到我们的网站上来认证此网站域名属于我们，如果需要和app打通，申请审核通过之后，需要发邮件给[email protected]，QQ互联申请打通的邮箱，按照特定格式发送邮件，等待打通
具体申请和打通的操作可以看这篇blog：https://blog.csdn.net/snow_finland/article/details/52511664

（3）代码接入：

第一步：跳转第三方

官方提供php的sdk，所以用自己的php的网址作为中转页面，通过php的sdk，可直接跳转到第三方进行授权（如需增加回调参数，需要去sdk里做一下改动）

第二步：第三方回调

第三方回调的时候，会带上临时票据code，通过php的sdk，可以验票据，并拿到用户信息（如果有和app打通，那么还可以拿到unionid），一般回到我们页面的时候已经获取到需要使用的信息，可以通过页面变量获取到，或者我们自己服务的token和后端进行交互了

PHP的sdk下载地址：https://wiki.connect.qq.com/sdk%E4%B8%8B%E8%BD%BD

 

3、微博授权

（1）使用场景：没有限制，有网页的地方就可以用，通常在微博（手机客户端，通过浏览器头信息判断）里，如果有weibo授权选项就默认走此通道，不用给用户选择（官方说法，还有专门的jssdk可用，以现有经验来说用一套即可）

（2）资料填写与申请：
新浪微博开放平台申请网页应用，需要放代码段到我们的网站上来认证此网站域名属于我们，可以和app打通（但由于年代久远，不记得如何操作打通步骤，需要自行摸索）

（3）代码接入：
同QQ授权

PHP的sdk下载地址：https://open.weibo.com/wiki/SDK

 

4、Facebook授权

（1）使用场景：没有限制，有网页的地方就可以用，通常在Facebook（手机客户端，通过浏览器头信息判断）里，如果有Facebook授权选项就默认走此通道，不用给用户选择（新版使用jssdk，之前有使用php的sdk作为中转）

（2）资料填写与申请：
Facebook for Developers（https://developers.facebook.com），去这里注册申请应用，注意app和网页如果需要打通，直接使用同一个appid即可（好像不需要填写多余资料，如果已经有app应用的话）

（3）代码接入：

一：JSSDK

JSSDK文档地址：https://developers.facebook.com/docs/javascript

第一步：引入jssdk

第二步：在需要获取用户信息的地方，先检查登录状态，如果已经登录直接获取用户信息；否则调起登录

FB.getLoginStatus(function(response) {
  console.log('FB.getLoginStatus:', response);
  if (response.authResponse && response.authResponse.userID) {
    // response.authResponse.accessToken，这里即为token，通过token，调用第三方接口可以获取到用户身份标识和用户信息，response.authResponse.userID等于第三方唯一用户标识符，相当于微信的unionid/openid，按需判断即可
    // todo 一般为和自己服务端交互，把用户信息或id传过去
  } else {
    FB.login(function(response) {
      // alert('FB.login:' + JSON.stringify(response));
      console.log('FB.login：', response);
      if (response.authResponse && response.authResponse.userID) {
        // response.authResponse.accessToken，这里即为token，通过token，调用第三方接口可以获取到用户身份标识和用户信息，response.authResponse.userID等于第三方唯一用户标识符，相当于微信的unionid/openid，按需判断即可
        // todo 一般为和自己服务端交互，把用户信息或id传过去
      } else {
        console.log('User cancelled login or did not fully authorize.');
        oauthFlag = false
      }
    });
  }
});

二、PHPSDK

PHPSDK文档地址：https://developers.facebook.com/docs/reference/php

步骤同QQ授权，以我们自己的php地址作为中转，调用第三方sdk

 

5、Twitter授权

（1）使用场景：没有限制，有网页的地方就可以用（之前用的不多）

（2）资料填写与申请：
Twitter Developer（https://developer.twitter.com），去这里注册申请应用，可以和app打通（但由于年代久远，不记得如何操作打通步骤，需要自行摸索）（官方说法，还有专门的jssdk可用，以现有经验来说用一套即可）

（3）代码接入：
同QQ授权

Twitter授权登录文档地址：https://developer.twitter.com/en/docs/basics/authentication/guides/log-in-with-twitter

PHPSDK文档地址：https://developer.twitter.com/en/docs/developer-utilities/twitter-libraries

JSSDK接入方式文档：https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/set-up-twitter-for-websites

 

6、Line授权

（1）使用场景：没有限制，有网页的地方就可以用（之前用的不多）

（2）资料填写与申请：
LINE Developers（https://developers.line.biz/zh-hant/），去这里注册申请应用，注意app和网页如果需要打通，直接使用同一个appid即可（不需要填写多余资料，只要同时勾选上web和app应用即可，web需要填写准确的回调地址，可填写多个）

（3）代码接入：
同QQ授权（提醒：由于使用的是PHP的方式，在code验证票据的时候是通过服务器访问LINE的服务，需要此服务器能访问到LINE的服务，或者通过代理方式访问）

Line授权登录文档地址：https://developers.line.biz/en/docs/line-login/integrate-line-login/

无官方PHPSDK，github有如下地址：（之前使用的是第一个库做的修改（原库存在和LINE对接的一些错误，具体详见Line的文档进行修改））
https://github.com/makorn645/PHP-line-login-sdk
https://github.com/chez14/line-sdk-php
https://github.com/shrekuu/line-web-login-v2