03月23, 2018

Github授权登陆

  • 第一步,我们要用 GitHub 提供的 id 去请求 git。这里我们就相当于重定向到 Github 的域名下,如果用户登录的 Github,用户的信息就存在,这里 Github 就会把用户信息用重定向 + query 传参数的方式传递给我们在 Github 注册的那个回调地址上。(列如我填写的 localhost:8080/login)
    <template>
    <div>
      <el-button @click="rediritc">
        授权登陆
      </el-button>
    </div>
    </template>
    <script>
    export default {
    data() {
      return {};
    },
    methods: {
      //这里就是调转到github
      rediritc(){
        window.location='https://github.com/login/oauth/authorize? 
        client_id=你的id&state=1&redirect_uri=http://localhost:8080/login'
      },
      callAuth(code){
       this.$http.get('http://127.0.0.1:7001/api/login',{code:code})
      }
    },
    created(){
      if(this.$route.query.code){
        this.callAuth(this.$route.query.code);
    }}};
    </script>
    
  • 第二步,我们要把重定向回来的 code 取出来,返回给后台,让后台用 Githunb 提供的密码去请求用户的身份 token. 这里我用到了 Vue 的生命周期函数,还有 vue-router 的 query。用原生代码也很好写,用正则取出来就行了。 先上后台的代码,koa2 的。
    const Controller = require('egg').Controller
    class LoginController extends Controller{
      async login(){
          const {ctx}=this;
      //这里应该从前端拿到code
          let curl=`https://github.com/login/oauth/access_token?client_id=你的id&client_secret=你的密码&code=${ctx.query.code}&redirect_uri=http://localhost:8080/login`
      //获取用户token
      const reslut=await ctx.curl(curl,{
          method: 'GET',
          dataType: 'json',
        })
      this.logger.info(reslut.data)
      let access_token=reslut.data.access_token;
      let user_curl=`https://api.github.com/user?access_token=${access_token};`
      //获取用户信息
      const user_info=await ctx.curl(user_curl,{
          method: 'GET',
          dataType: 'json',           
      })
      this.logger.info(user_info.data)
      ctx.set('Access-Control-Allow-Origin','http://localhost:8080')
      //演示的代码跨域啦,这里授权一下
      ctx.body=user_info.data;
      //把用户信息给前台
    }
    async auth(){
      this.logger.info(JSON.stringify(ctx.query));  
    }
    }
    module.exports=LoginController;
    
  • 第三步,就是用前台的 code 去请求'https://github.com/login/oauth/access_token', 取到用户的 token 身份标识。然后用 token 去请求'https://api.github.com/user', 拿到用户信息。之后就可以为用户注册或者登陆,然后返回用户数据给前台啦。

本文链接:http://www.redtwodog.top/post/Node.html

-- EOF --

Comments