前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第三方账户登录--github

第三方账户登录--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项目

代码语言:javascript
复制
vue create web
后端

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

代码语言:javascript
复制
// 安装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封装

代码语言:javascript
复制
npm install axios --save
3.2 全局引入 web/src/main.js
代码语言:javascript
复制
import axios from 'axios'
axios.defaults.baseURL='http://localhost:3000';
global.axios=axios;
3.3 跳转github登录授权页面 web/src/views/Home.vue
代码语言:javascript
复制
<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

代码语言:javascript
复制
    {
      path: "/github/auth",
      name: "github",
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/Github.vue")
    }

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

代码语言:javascript
复制
<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至服务端
代码语言:javascript
复制
  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

代码语言:javascript
复制
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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果预览
  • 1.项目创建准备(前端+后端+数据库)
    • 前端
      • 后端
        • 数据库
        • 2.再github上配置授权登陆信息
        • 3.前端获取github提供的code并传给服务端
        • 4.服务端接收code,获取用户信息,并插入数据库返回给前端
        • 最后
        相关产品与服务
        数据库
        云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档