第三方登陆auth(github)

最新推荐文章于 2024-05-03 08:00:00 发布

么心么肺

最新推荐文章于 2024-05-03 08:00:00 发布

阅读量849

点赞数

分类专栏：前端鉴权方案

本文链接：https://blog.csdn.net/weixin_41545048/article/details/102978945

版权

前端鉴权方案专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.第三方登陆原理

用户想要通过某网站登录第三方网站，那么某网站就需要让用户提供第三方网站的数据，证明自己的身份。获取第三方网站的身份数据，就需要 Auth 授权。所以我们需要先去第三方网站进行登记。流程图如下：
在这里插入图片描述

二.去github进行登记

登记前需要注册github账号，（注册过程不在赘述），登记流程如下：

在这里插入图片描述

*注意：这里的Homepage URL是你的Homepage页面
Authorization callback URL是获得授权后的跳转页面

这就是github服务器认证身份的依据，认证后返回一个带认证的code

三.实现代码

认证后的跳转页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>使用github登录</h1>
        <button><a href="/github/login">login with github</a></button>
    </div>
</body>
<script>
    new Vue({
        el:"#app"
    })
</script>
</html>

后端服务（koa）

在这里插入图片描述

四.实现结果

在这里插入图片描述
详细流程请参考：GitHub OAuth 第三方登录示例教程–阮一峰

么心么肺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第三方登陆auth(github)

一.第三方登陆原理用户想要通过某网站登录第三方网站，那么某网站就需要让用户提供第三方网站的数据，证明自己的身份。获取第三方网站的身份数据，就需要 Auth 授权。所以我们需要先去第三方网站进行登记。流程图如下：二.去github进行登记登记前需要注册github账号，（注册过程不在赘述），登记流程如下：*注意：这里的Homepage URL是你的Homepage页面Author...
复制链接

扫一扫