专栏首页前端vue第三方账户登录--github

第三方账户登录--github

使用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,使用什么框架技术不重要,大体的授权逻辑是一样的 项目源码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • json-server增删改查

    npm install json-server -g或cnpm install json-server -g

    RtyXmd
  • VuePress搭建永久文档/博客网站VuePress 使用

    保存并提交代码至github,提交代码后等待1分钟 浏览器访问 http://自己的github用户名.github.io 看到hello github 到这...

    RtyXmd
  • Node中间件multer文件上传实践

    单文件上传,接收一个以fieldname命名的文件,文件信息保存在req.file

    RtyXmd
  • 【iOS 开发】用泛型简化 instantiateViewController

    使用 storyboard 的时候,我们经常会写出下面这样的代码,用来跳转到其他页面

    KyXu
  • AI当“暖男”:给裸照自动穿上比基尼

    【新智元导读】AI可以用来鉴黄,但有时会把含裸女的古典名画过滤掉。巴西的一组研究人员在JICNN上展示了一种新方法,使用生成对抗网络,给女性裸体照“穿上”比基尼...

    新智元
  • 运维自动化基础建设|CodeReview

    曾经流传一个段子,一个新手提交了10行代码,然后收到了500个的issue, 有一次提交了500行代码,收到了0个issue,虽然是一个段子,从中我们不难看出一...

    追马
  • 模型评估 | Precision-Recall Curve

    最近接手的一个项目,最后被要求给出查准率-查全率曲线(Precision-Recall Curve)以及曲线对应的查准率、查全率数值序列。查准率-查...

    小石头记
  • Nodejs中使用ioredis库

    Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中间件。 它支持多种类型的数据结构,如 字符串(strings),...

    ccf19881030
  • 意能通刘雨松:做最垂直的语义技术场景,法规约束不能一刀切丨镁客请讲

    相信每个人都有接到电话广告的经历,但很多人不知道的是,电话另一头并不是“真实的人类”,而是以AI为代表的智能客服机器人。

    镁客网
  • [Leetcode][python]Insert Interval/插入区间

    来自:https://shenjie1993.gitbooks.io/leetcode-python/057%20Insert%20Interval.html ...

    后端技术漫谈

扫码关注云+社区

领取腾讯云代金券