H5微信授权登录弹窗提示

如下图：用户授权登录前，先通过静默授权，拿到token，展示部分信息，用户通过授权后拿到头像昵称，该弹窗让用户有个比较好的体验

请求过程如下：

1、首次在没有UID、code的情况下：静默授权（&scope=snsapi_base）-->微信带回code，App.vue通过code调取服务端接口（code2session）获取token、openid，此时还拿不到用户头像、昵称

2、前端展示页，显示如下图用户授权弹窗，用户点击允许授权（&scope=snsapi_userinfo），同时设置过期时间(还未拿到头像昵称)，调用（code2session）服务端拿到用户头像昵称，微信地址还是会带回code，调用服务端接口获取用户信息。

3、如果用户登录过期时，前端界面通过过期验证弹出出授权弹窗，用户允许授权，直接调用服务端获取用户信息接口即可。

，

展示界面部分代码：

1、标签

<template><!--遮罩--><view v-if="showAuth"style="background-color:rgb(0 0 0 / 8%);position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 999;"@click="handelLogin"><view class="author-view"><view><image class="author-title-img" src="../../static/img/gologin.gif"></image></view><view>为了让您获得更好浏览体验</view><view>请先进行微信授权</view><view class="author-title-btn"><view>去授权</view></view></view></view></template>

2、js

<script>import tool from '@/common/utils/tool.js'export default {data() {return {showAuth: false,lastLocal: '',isReplace: false}},methods: {handelLogin() {this.$store.commit('CLEAR_CWZ_USER_INFO')const APPID = this.$config.AppIdvar local = window.location.href //tool.local.get('init_local')var lastLocal = local
//lastLocal :静默授权后回调地址会返回code，当用户同意授权后回调地址还会拼接code，这里将现有路径上的所有的code去掉，再复制给回调地址，以保证code是最新的let strsArr = local.split('?'); //将字符串内容以&分隔为一个数组if (strsArr.length >= 2) {let str_back = local.substr(local.indexOf('?')); //截取?后面的内容作为字符串let strs = str_back.split('#/'); //将字符串内容以&分隔为一个数组if (strsArr.length == 2) {// lastLocal = strsArr[0] + strs[strs.length - 1]var lastStr = strs[strs.length - 1]var lastStr_arr = lastStr.split('?')if (strs.length >= 2) {lastLocal = strsArr[0] + '#/' + strs[strs.length - 1]} else {lastLocal = strsArr[0] + strs[strs.length - 1]}} else {lastLocal = strsArr[0] + '#/' + strs[strs.length - 1]}}//  this.$store.commit('CLEAR_CWZ_USER_INFO')//   this.showAuth = false;//允许授权后关闭授权遮罩var loginDate = new Date().getTime()tool.local.set('lastLoginDate', loginDate)window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID +'&redirect_uri=' +encodeURIComponent(lastLocal) +'&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect'},},onShow() {},mounted() {//授权获取用户信息var self = thisvar lastLoginDate = tool.local.get('lastLoginDate') //过期时间戳if (lastLoginDate) { // 已登录过，判断是否过期var nowDate = new Date().getTime()var interval = (nowDate - lastLoginDate) / (60 * 60 * 1000)//var interval = (nowDate - lastLoginDate) / (60 * 1000) //测试 大于10秒就算过期if (interval >= 24) { // 过期//if (interval >= 5) { // 过期this.showAuth = true;tool.local.del('lastLoginDate')} else {this.showAuth = false; //允许授权后关闭授权遮罩}} else { // 没有登录过 且还未重定向//this.$store.commit('CLEAR_CWZ_USER_INFO')this.showAuth = true;}}}
</script>

3、css

/**底部授权*/.author-view {position: fixed;bottom: 0;width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;background: linear-gradient(transparent, #FFF, #FFF, #FFF);z-index: 999;color: #000;padding: 30px 0;}.author-title-btn {background-color: #1373ff;color: #fff;padding: 10px 70px;border-radius: 20px;margin-top: 20px;}.author-title-img {width: 50px;height: 50px;margin-bottom: 10px;}

App.vue执行过程

local：地址也要处理下，把微信回调的地址自动拼接的code掉

if (!userId) {self.$store.commit('CLEAR_CWZ_USER_INFO')if (!code) {//新用户进来静默授权window.location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +APPID +'&redirect_uri=' +encodeURIComponent(local) +'&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect';} else {//授权回调，已经拿到code，走code2sessionself.setupWxSDK(APPID, url);if (code_local !== code) {self.code2Session(code, local)} else {//点击授权后，拒绝授权，返回上一页重新静默授权window.location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +APPID +'&redirect_uri=' +encodeURIComponent(local) +'&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect';}}} else {//有userid的情况// TODO 有缓存的用户信息，没有过期，并且信息完全，不需要跳转授权的情况，直接进入系统var headimgurl = tool.local.get('headimgurl')var nickName = tool.local.get('nickName')if (lastLoginDate && headimgurl && nickName) {var nowDate = new Date().getTime() // (nowDate - lastLoginDate) 两个时间的毫秒数差值//1000毫秒=1秒 60*60*1000代表1小时 ，var interval = (nowDate - lastLoginDate) / (60 * 60 * 1000)//var interval = (nowDate - lastLoginDate) / (60 * 1000) //测试 大于10秒就算过期if (interval >= 24) { // 过期//if (interval >= 5) { // 过期} else {self.setupWxSDK(APPID, url);//获取用户信息this.selectUserAndGptInfo(userId)}} else if (code) {self.setupWxSDK(APPID, url);//授权回调，已经拿到code，走code2sessionif (code_local !== code) { //code唯一，不能重复提交tool.local.set('code_local', code)self.code2Session(code, local)}}}

H5微信授权登录弹窗提示相关推荐

uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录文章目录 uniapp开发h5微信授权登录前言一.前期准备--申请测试账号二.正式开发--前端代码三.打包发布总结前言我也是第一次做h5授权微信登录,网 ...
H5 微信授权登录功能实现
背景最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...
H5微信授权登录后点击返回出现循环登录无法退出问题
简单介绍h5微信授权流程 1.入口页跳转到我们自己创建的空白授权页 2.在空白授权页判断url上是否包含code,没有code拼接微信授权链接,通过location.href进行跳转 location ...
pc、h5微信授权登录
pc登录微信登录(通过后端返回一个qrcode重定向到页面上,进行扫码授权,获取code即可,再根据code获取登录信息) h5登录微信授权登录:(支持微信浏览器,其它浏览器无法拉起微信的授权): ...
uniApp微信小程序唤出授权头像昵称(微信授权登录)弹窗，及服务端用户信息解密注意事项
头像昵称弹窗弹出条件:button授权按钮 + uni.getUserProfile API请求简单唤醒示范案例: 1.H5部分 <text class="loginsubmitbo ...
关于微信公众号页面获取code进行微信授权登录
关于微信公众号页面获取code进行微信授权登录前言提示:本文章为个人平时开发中的一些坑,对于新手可以耐心看一下,如果您感觉可以的话,请点个小星星再走吧,多谢了~~~ 提示:以下是本篇文章正文内容( ...
微信h5登录php,vue实现微信授权登录步骤详解
这次给大家带来vue实现微信授权登录步骤详解,vue实现微信授权登录的注意事项有哪些,下面就是实战案例,一起来看一下. 背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给 ...
uniapp - 超详细的 H5 公众号网页微信登录示例代码，提供从 0-1 公众号配置及详细注释代码（站在新手小白的角度）第三方微信授权登录的实现！！
介绍目前示例是 "点击按钮登录",你也可以改为 "一进页面就登录" ,可随意改造. 百度的教程都太乱了,而且功能都有一定问题.本文主要讲解 uniapp H5 ...
浏览器打开微信公众号h5页面，增加cookie绕过微信授权登录
from selenium import webdriver from time import sleepdriver = webdriver.Chrome() #插入cookie需要与cookie相 ...

H5微信授权登录弹窗提示

H5微信授权登录弹窗提示相关推荐

最新文章

热门文章