原理
首先,我们的目的是通过第三方账号的授权来实现用户的登录操作,也即用户不用直接创建我们网站或应用的账户,而是直接通过原有的第三方账户来登录,比如微信,qq等。
其原理图如下:
原理简单讲就是先跳转到第三方应用(如qq)的登录界面,然后用户输入账号密码登录成功,并且统一授权,第三方应用的服务器就会返回一个code给我方服务器,我方服务器再带着这个code去第三方应用的服务器去换取一个access_token,获取这个access_token之后我们就能够使用被授权的各种功能,比如查看用户信息这些,具体能够进行哪些操作要去看第三方应用提供的api,然后根据接口调用,调用时都需要带着这个access_token去操作。
而对于我们这里登录来说,我们获取access_token后,就去获取一些信息来创建一个我们网站的新账户,首先我们需要一个它再原第三方应用中就是unique的信息,比如id,然后还可以获取头像这些信息,然后注入到我们网站的给他新创建的哪个账户中,之后用户登录的时候也是先获取第三方应用中的信息,然后看看我们网站的用户数据中有没有哪个账户的第三方应用id字段等于这个用户的第三方应用id,有的话就直接登录,没有的话就要给他创建个账户。
总之,不是不创建账户,只是将其第三方账户关联到我们的用户账号中,自动从其第三方应用的账户中获取创建我们用户账户所需要的字段,然后帮用户省去自己创建账户的繁琐过程。那么这就要求我们从他的第三方账户中获取得到一个能唯一标识其身份的字段,比如前面说的id,这样才能唯一关联我们的用户账户。当然,如果我们无法获取唯一标识字段,只能获取到头像或者性别这样的一些信息,我们可以再第三方授权获得这些信息后再加一个步骤来补充需要的信息,比如授权后还需要其输入手机号码(好像看见很多小程序都这样干),用这个手机号码来唯一标识他。
实现:
参考gitee官方文档:gitee官网文档:https://gitee.com/api/v5/oauth_doc#/
去第三方应用的创建一个我们网站的接口,相对于去他那登记下,我们这个应用到时候需要它授权哪些东西。
这类平台有微博开放平台,微信开放平台,gitee,前两个审核麻烦,gitee直接就能用。
以gitee为例,首先我们需要去gitee创建一个第三方应用(相对gitee而言我们叫第三方应用),在个人信息的第三方应用,如下所示:
里面的主页地址指的是登录成功后跳转的地址,回调地址是指用户输入账户密码,然后统一授权后会得到一个code,然后这个code信息交给哪个接口来处理。这里地址可以就是本地的地址,像http://localhost:8080/path/to/xx都可以。
首先,用户点击我们登录页面的第三方登录按钮,比如gitee登录,我们给该登录按钮放上gitee的Oauth给的那个链接:https://gitee.com/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}&response_type=code,里面的client_id和redirect_uri这些就是我们上面再gitee登记应用的信息,然后就会进入gitee的登录界面。
前端代码:
<a href="https://gitee.com/oauth/authorize?client_id=4d34db3a2769cb4bd9a4a53cec8a387691844bab70f1172e35423ca9a6d0808e&redirect_uri=http://auth.gulimall.com/oauth2.0/gitee/success&response_type=code">
<img style="width: 50px;height: 18px;" src="/static/login/JD_img/gittee.jpg"/> </a>
过程如下:
然后就会带着code到我们在应用中写的后端接口处"http://auth.gulimall.com/oauth2.0/gitee/success".
我们在后端接口中再写代码向第三方服务器发请求,带着code这些参数
https://gitee.com/oauth/token?grant_type=authorization_code&code={code}&client_id={client_id}&redirect_uri={redirect_uri}&client_secret={client_secret}
然后得到访问的token。