使用 Abp.Zero 搭建第三方登录模块(三):网页端开发
简短回顾一下网页端的流程,总的来说网页端的职责有三:
- 生成一个随机字符作为鉴权会话的临时Token,
- 生成一个小程序码, Token作为参数固化于小程序码当中
- 监控整个鉴权过程状态,一旦状态变为AUTHORIZED(已授权)则获取小程序登录凭证code。调用ExternalAuthenticate完成登录。
上一章,我们介绍了服务端的开发,这次我们需要调用GetACode,GetToken,分别获取小程序码,和获取当前状态
首先使用vue-cli创建一个web项目,命名为mp-auth
vue create mp-auth
新建ajaxRequest.ts,创建request对象,这一对象将利用axios库发送带有访问凭证的Header的请求
这里使用js-cookie库获取cookie中的访问凭证,并添加到Header中
import Cookies from "js-cookie";
import axios, { CancelTokenSource } from 'axios'
//发送网络请求
const tokenKey = "main_token";
const getToken = () => Cookies.get(tokenKey);
export const request = async (url: string, methods, data: any, onProgress?: (e) => void, cancelToken?: CancelTokenSource) => {
let token = null
let timeout = 3000;
if (cancelToken) {
token = cancelToken.token
timeout = 0;
}
const service = axios.create()
service.interceptors.request.use(
(config) => {
const token = getToken();
// Add X-Access-Token header to every request, you can add other custom headers here
if (token) {
config.headers['X-XSRF-TOKEN'] = token
config.headers['Authorization'] = 'Bearer ' + token
}
return config
},
(error) => {
Promise.reject(error)
}
)
const re = await service.request({
url: url,
method: methods,
data: data,
cancelToken: token,
timeout: timeout,
onUploadProgress: function (progressEvent) { //原生获取上传进度的事件
if (progressEvent.lengthComputable) {
if (onProgress) {
onProgress(progressEvent);
}
}
},
})
return re as any;
}
///获得取消令牌
export const getCancelToken = () => {
const source = axios.CancelToken.source();
return source;
}
回到App.vue
我们按照网页端这个三个职责的顺序,分步骤完成代码
生成Token
首先建立两个变量,存储当前的Token和状态枚举值
export default {
name: "App",
data: () => {
return {
wechatMiniappLoginToken: null,
wechatMiniappLoginStatus: "WAIT",
};
},
methods中建立getToken函数,这里使用8位随机数作为token值
methods: {
getToken() {
if (this.wechatMiniappLoginToken == null) {
var date = new Date();
var token = `${(Math.random() * 100000000)
.toFixed(0)
.toString()
.padEnd(8, "0")}`;
this.wechatMiniappLoginToken = token;
}
return this.wechatMiniappLoginToken;
}
}
生成小程序码
Html部分,插入一个图片,将token传入scene参数
<img :src="`${prefix}/MiniProgram/GetACode?scene=${getToken()}&page=${miniappPage}&mode=content`"/>
Prefix是你的服务地址前缀
prefix: "https://localhost:44311/api/services/app"
page为小程序中鉴权页面的路径,需注意的是在小程序未发布时无法跳转至页面,报错41030,若要使用扫码来跳转指定页面,小程序需要先发布
miniappPage: "pages/login/index"
监控整个鉴权过程状态
首先需要一个函数,根据当前的Token获取当前鉴权状态,并且不断循环这一操作,这里编写start函数,并以每1秒钟轮询状态,代码如下:
start() {
clearInterval(this.timerId);
this.timerId = setInterval(async () => {
if (!this.loading) {
this.loading = true;
await request(
`${this.prefix}/MiniProgram/GetToken?token=${this.wechatMiniappLoginToken}`,
"get",
null
)
}
}, 1000);
},
在页面开始函数代码Created中调用这一函数
created: function () {
this.start();
},
接下来处理轮询结果,如果没有拿到值,说明Token已过期,wechatMiniappLoginStatus状态为"EXPIRED"
await request(
`${this.prefix}/MiniProgram/GetToken?token=${this.wechatMiniappLoginToken}`,
"get",
null
)
.then(async (re) => {
if (re.data.result == null) {
this.wechatMiniappLoginStatus = "EXPIRED";
this.wechatMiniappLoginToken = null;
this.loading = false;
}
注意:
在后端项目的MiniProgramAppService.cs中,我们定义的
TokenCacheDuration为5分钟,表明二维码的有效时间为5分钟。
public static TimeSpan TokenCacheDuration = TimeSpan.FromMinutes(5);
相应的Token为Expired时,将wechatMiniappLoginToken置空,这一属性变动vue会通知img的src值变动而刷新小程序码,同时获取新的Token值赋值给wechatMiniappLoginToken,这也是刷新小程序码的逻辑
this.wechatMiniappLoginToken = null;
这样能以简单方式,实现二维码刷新功能。
界面中新建一个刷新小程序码的按钮:
<el-button
v-if="wechatMiniappLoginToken != null"
type="primary"
size="medium"
@click="wechatMiniappLoginToken = null"
>刷新
</el-button>
编写一个externalLogin方法,在用于获取Code后,调用后端第三方登录接口,获取访问凭证存储于Cookie中
async externalLogin(userInfo: {
authProvider: string;
providerKey: string;
providerAccessCode: string;
}) {
let authProvider = userInfo.authProvider;
let providerKey = userInfo.providerKey;
let providerAccessCode = userInfo.providerAccessCode;
await request(
`https://localhost:44311/api/TokenAuth/ExternalAuthenticate`,
"post",
{
authProvider,
providerKey,
providerAccessCode,
}
).then(async (res) => {
var data = res.data.result;
setToken(data.accessToken);
});
},
定义setToken函数,使用js-cookie库将访问凭证写入浏览器cookie中
const tokenKey = "main_token";
const setToken = (token: string) => Cookies.set(tokenKey, token);
在此之前我们需写一个参数传递对象,为了保留一定的扩展能力,data中我们定义loginExternalForms,已经实现的微信小程序登录,则对应的authProvider值为“WeChatAuthProvider”,providerAccessCode则为生成的Token值
loginExternalForms: {
WeChat: {
authProvider: "WeChatAuthProvider",
providerKey: "default",
providerAccessCode: "",
},
},
接下来包装externalLogin方法,在调用完成前后做一些操作,比如登录成功后,将调afterLoginSuccess方法
为了保留一定的扩展能力,handleExternalLogin函数中我们保留参数authProvider,已实现的微信小程序登录handleWxLogin函数调用时传递参数"WeChat"
async handleExternalLogin(authProvider) {
// (this.$refs.baseForm as any).validate(async (valid) => {
// if (valid == null) {
var currentForms = this.loginExternalForms[authProvider];
this.loading = true;
return await this.ExternalLogin(currentForms).then(async (re) => {
return await request(
`${this.prefix}/User/GetCurrentUser`,
"get",
null
).then(async (re) => {
var result = re.data.result as any;
return await this.afterLoginSuccess(result);
});
});
},
async handleWxLogin(providerAccessCode) {
this.loginExternalForms.WeChat.providerAccessCode = providerAccessCode;
return await this.handleExternalLogin("WeChat");
},
afterLoginSuccess函数用于登录成功后的逻辑,停止计时器,并跳转页面,本实例仅做弹窗提示
successMessage(value = "执行成功") {
this.$notify({
title: "成功",
message: value,
type: "success",
});
},
async afterLoginSuccess(userinfo) {
clearInterval(this.timerId);
this.successMessage("登录成功");
this.userInfo = userinfo;
},
继续编写start函数
如果拿到的token至不为空,则传递值给wechatMiniappLoginStatus,当wechatMiniappLoginStatus状态为"AUTHORIZED"时调用handleWxLogin函数:
if (re.data.result == null) {
this.wechatMiniappLoginStatus = "EXPIRED";
this.wechatMiniappLoginToken = null;
this.loading = false;
} else {
var result = re.data.result;
this.wechatMiniappLoginStatus = result.status;
if (
this.wechatMiniappLoginStatus == "AUTHORIZED" &&
result.providerAccessCode != null
) {
await this.handleWxLogin(result.providerAccessCode)
.then(() => {
this.wechatMiniappLoginToken = null;
this.loading = false;
})
.catch((e) => {
this.wechatMiniappLoginToken = null;
this.loading = false;
clearInterval(this.timerId);
});
} else {
this.loading = false;
}
}
接下来简单编写一个界面,
界面将清晰的反映wechatMiniappLoginStatus各个状态时对应的UI交互:
WAIT(等待扫码):
ACCESSED(已扫码):
ACCESSED(已扫码):
完整的Html代码如下:
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" /> -->
<div style="height: 450px">
<div v-if="wechatMiniappLoginStatus == 'ACCESSED'">
<el-result
icon="info"
title="已扫码"
subTitle="请在小程序上根据提示进行操作"
>
</el-result>
</div>
<div v-else-if="wechatMiniappLoginStatus == 'AUTHORIZED'">
<el-result
icon="success"
title="已授权"
:subTitle="loading ? '请稍候..' : '正在使用微信账号登录系统'"
>
</el-result>
</div>
<div v-else class="center">
<img
:src="`${prefix}/MiniProgram/GetACode?scene=${getToken()}&page=${miniappPage}&mode=content`"
/>
</div>
</div>
<div class="center">
<el-button
v-if="wechatMiniappLoginToken != null"
type="primary"
size="medium"
@click="wechatMiniappLoginToken = null"
>刷新</el-button
>
</div>
<div class="center">
<span>{{ userInfo }}</span>
</div>
</div>
</template>
至此我们已完成网页端的开发工作
使用 Abp.Zero 搭建第三方登录模块(三):网页端开发的更多相关文章
- 使用 Abp.Zero 搭建第三方登录模块(一):原理篇
第三方登录是基于用户在第三方平台上(如微信,QQ, 百度)已有的账号来快速完成系统的登录.注册-登录等功能. 微信的鉴权 以微信的鉴权为例: 假如你的网站有一个扫码登录的功能,会弹出一个由微信提供的 ...
- 第四百零四节,python网站第三方登录,social-auth-app-django模块,
第四百零四节,python网站第三方登录,social-auth-app-django模块, social-auth-app-django模块是专门用于Django的第三方登录OAuth2协议模块 目 ...
- 3. ABP .NETCore 添加企业微信第三方登录
1.企业微信登录步骤 1.获取企业微信Token 官方文档:https://work.weixin.qq.com/api/doc#90000/90135/91039 2.通过Token 与前端传的Co ...
- QQ第三方登录
QQ第三方登录 在Android应用程序的开发过程中,很多时候需要加入用户登录/注册模块.除了自己动手设计登录界面并实现相应功能外,现在还可以借助百度.腾讯等开发者平台提供的第三方账号登录模块.最近研 ...
- CI框架 QQ接口(第三方登录接口PHP版)
本帖内容较多,大部分都是源码,要修改的地方只有一个,其他只要复制过去,就可以完美运行.本帖主要针对CI框架,不用下载SDK,按我下面的步骤,建文件,复制代码就可以了.10分钟不要,接口就可完成.第一步 ...
- QQ登录接口(第三方登录接口)
CI框架 QQ接口(第三方登录接口PHP版) 本帖内容较多,大部分都是源码,要修改的地方只有一个,其他只要复制过去,就可以完美运行.本帖主要针对CI框架,不用下载SDK,按我下面的步骤,建文件,复制代 ...
- 从零开始用 Flask 搭建一个网站(三)
从零开始用 Flask 搭建一个网站(二) 介绍了有关于数据库的运用,接下来我们在完善一下数据在前端以及前端到后端之间的交互.本节涉及到前端,因此也会讲解一下 jinja2 模板.jQuery.aja ...
- Unity利用Share SDK实现QQ、微信及微博第三方登录及定制内容分享(附代码)
最近因为公司的项目需要添加一些实用性的功能,需要添加第三方登录及分享,采用的是Mob的SDK,可以先到其官网下载对应的SDK 点击这里,为了方便后期进行数据统计和分析,所以可以先添加一个应用,添加成功 ...
- 使用OAuth2.0协议的github、QQ、weibo第三方登录接入总结
目录 第三方接入总结 OAuth2.0介绍 github OAuth2.0登录接入 国内第三方应用商SDK使用 微博SDK 腾讯QQ SDK passport.js插件使用 安装 相关中间件.路由 返 ...
随机推荐
- 劳动节快乐!手写个核心价值观编码工具 - Python实现
前言 今天是五一劳动节,祝各位无产阶级劳动者节日快乐! 然后来整活分享一些有趣的东西~ 这个小工具是我大学时做着玩的,对于各位接班人来说,12个词的核心价值观这东西,大家都非常熟悉了,这工具可以实现将 ...
- position与float
position:fixed/absolute和float的关系:元素设置position:absolute / fixed后,float属性是没有效果的.对于position: absolute元素 ...
- 20220303模拟赛题解and总结
目录 总结 A.不幸的7 B.选举 C. 差的绝对值之和 D. 路径通过 总结 初一第一 一般,最后一题没打好 不难发现,教练出水了,可能是信心赛 A.不幸的7 暴力,没有逻辑可言 #include& ...
- 中间件漏洞之Nginx
中间件漏洞之Nginx 我们常见的中间件有IIS.Apache.Nginx,其中Nginx中间件有什么漏洞呢? Nginx 文件名逻辑漏洞(CVE-2013-4547): 漏洞版本: Nginx 0. ...
- Java高并发-多线程基础
一.什么是线程 线程是进程内的执行单元. 二.线程的基本操作 2.1 状态与操作 2.2 新建线程 Thread t1 = new Thread(new CreateThread()); t1.sta ...
- 39. Combination Sum - LeetCode
Question 39. Combination Sum Solution 分析:以candidates = [2,3,5], target=8来分析这个问题的实现,反向思考,用target 8减2, ...
- 关于Redis的问题探讨(二):Range方法返回的对象是LinkeHashMap以及转换办法
上一篇:关于Redis的问题探讨(一):为何存放集合偏向于转String后存放而非直接存 在上篇中发现了一个问题,明明存的是一个对象的集合,为什么通过range方法返回的却是LinkeHashMap ...
- Kafka消息的压缩机制
最近在做 AWS cost saving 的事情,对于 Kafka 消息集群,计划通过压缩消息来减少消息存储所占空间,从而达到减少 cost 的目的.本文将结合源码从 Kafka 支持的消息压缩类型. ...
- 互联网大厂目标管理OKR实践落地与反思
上一篇「 互联网公司目标管理OKR和绩效考核的误区 」介绍了使用 OKR 时要澄清的一些概念,但是实际使用中又如何呢?我们快手也是很大的互联网公司,大家都是年轻人,思维活跃,容易接受新事物,敢尝试,但 ...
- Conda 虚拟环境移植
这时候你应该位于具有待移植的环境的服务器: 1 进入你要移植的环境 conda activate your_env 2 导出当前conda环境到某个文件(文件名字可以自定义) conda env ex ...