第三方账户登录--github

RtyXmd

发布于 2019-05-10 10:35:17

2K0

发布于 2019-05-10 10:35:17

文章被收录于专栏：前端vue

使用github账户进行第三方登录授权前端vue，后端node+express+mysql，使用什么框架技术不重要，大体的授权逻辑是一样的项目源码

效果预览

github授权登录

1.项目创建准备（前端+后端+数据库）

前端

前端使用vue-cli3创建项目，可以参考这篇文章 vue-cli3项目

vue create web

后端

使用node+express创建项目，可以参考这篇文章 node+express项目

// 安装express及构造器
npm install express -g
npm install express-generator -g
// 初始化express项目
express server

数据库

新建一个数据库：test，

新建数据表：user_info，

添加username，password，portrait，login_time，shss_token字段

数据库test

2.再github上配置授权登陆信息

注册或登录github，一次选择Settings => Developer settings => New OAuth App

如果有域名的直接添加域名，如果像我这样开发测试的，指定为本地前端项目运行地址就行

guthub授权信息

保存id和secret

登记成功后会显示应用的id和secret，后面会用到。

id和secret

3.前端获取github提供的code并传给服务端

3.1 安装引入axios

为了方便开发，未作封装，只是简单的全局引入axios axios封装

npm install axios --save

3.2 全局引入 web/src/main.js

import axios from 'axios'
axios.defaults.baseURL='http://localhost:3000';
global.axios=axios;

3.3 跳转github登录授权页面 web/src/views/Home.vue

<template>
  <div>
    <button @click="toGithub">github登录</button>
  </div>
</template>

<script>
//github登录授权页面
let oauth_uri='https://github.com/login/oauth/authorize'
//github中获取
let client_id = 'c26a2c36287f5662ed62'
//授权回调地址
let redirect_uri = 'http://192.168.1.177:8081'
export default {
  methods: {
    toGithub() {
      window.location.href = `${oauth_uri}?client_id=${client_id}&redirect_url=${redirect_uri}`
    }
  }
};
</script>

3.4 新建授权回调页面及路由

根据在github上面配置的Authorization callback URL配置前端路由及页面

Authorization callback URL

创建对应路由 web/src/router.js

    {
      path: "/github/auth",
      name: "github",
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/Github.vue")
    }

创建对应页面 web/src/views/Github.vue

<template>
  <div>
    <div>{{githubUser}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      githubUser: "github登陆中..."
    };
  },
  mounted() {
    let code = this.$route.query.code;
    console.log(code)
  }
};
</script>

<style lang="scss" scoped>
</style>

3.5 axios发送code至服务端

  mounted() {
    let code = this.$route.query.code;
    axios
      .get(`/users/github_auth?code=${code}`)
      .then(res => {
        if (res.data.data.username) {
          this.githubUser = res.data.data.username;
        }
      })
      .catch(function(err) {
        console.log(err);
      });
  }

4.服务端接收code，获取用户信息，并插入数据库返回给前端

如果是自己在本地搭的node后台，因端口不一样，前台请求会有跨域问题，可以通过CORS解决，相关文章：CORS解决跨域问题 node代码直接写在一个接口中处理，每一步都写了清晰的注释

server/routes/users.js

var express = require("express");
var router = express.Router();
const fetch = require("node-fetch");
var mysql = require("mysql"); //引入mysql
//数据库配置
var db = {
  mysql: {
    host: "localhost",
    user: "root", //数据库用户名
    password: "root", //数据库密码
    database: "test", //要链接的数据库
    port: 3306 //默认端口
  }
};
var selAll = "select * from user_info";
var pool = mysql.createPool(db.mysql);

router.get("/github_auth", async (req, res, next) => {
  let code = req.query.code;
  //获取github的access_token请求地址
  let path = "https://github.com/login/oauth/access_token";
  const params = {
    //id和secret
    client_id: "c26a2c36287f5662ed62",
    client_secret: "f88afd71471725488ed301697f634c7d85d5524c",
    //前端发送的code
    code: code
  };
  await fetch(path, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(params)
  })
    .then(res => {
      return res.text();
    })
    .then(body => {
      //解析并返回access_token
      let args = body.split("&");
      let arg = args[0].split("=");
      let access_token = arg[1];
      return access_token;
    })
    .then(async token => {
      //通过token获取用户信息
      let url = "https://api.github.com/user?access_token=" + token;
      await fetch(url)
        .then(res2 => {
          return res2.json();
        })
        .then(response => {
          //拿到github用户信息
          //写入数据库
          let insertUser =
            "INSERT INTO user_info (id,username,portrait) VALUES (?,?,?)";
          let data = [response.id, response.login, response.avatar_url];
          pool.getConnection(function(err, suc) {
            //测试demo并未做用户筛选等处理
            //可以在此处验证用户是否已授权，或已存在于数据库中
            suc.query(insertUser, data, function(err, result) {
              if (result) {
                //插入新用户成功之后再把用户信息返回给前端
                var getUser = "select * from user_info where id=?";
                suc.query(getUser, [result.insertId], function(err, userRes) {
                  sendRes = {
                    //返回数据与格式
                    code: 200,
                    msg: "三方登录成功",
                    data: userRes[0]
                  };
                  res.json(sendRes); //响应返回json数据
                  suc.release();
                });
              }
            });
          });
        });
    })

    .catch(e => {
      console.log(e);
    });
});

module.exports = router;

最后

关于第三方授权登录，个人认为既然用户选择了第三方授权登录，就不要在用户同意授权之后再返回网站选择注册账号，与网站账号是否绑定应该取决于用户自己，否则授权之后再注册，这跟耍流氓没啥区别。还有第三方授权登录的用户表和直接网站注册的用户表，我认为可以放在一个表中，也可以分开放，如果放在一个表里面，就在用户授权之后信息保存数据库，用户只能通过授权才能登录，除非用户选择绑定网页账户。分开放的话应该更清晰一些，不过我本人对数据库方面了解也不多。。怎么存还是看各自网站的需求了使用github账户进行第三方登录授权前端vue，后端node+express+mysql，使用什么框架技术不重要，大体的授权逻辑是一样的项目源码

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.04.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

github