微信小程序授权登陆页面

最新推荐文章于 2024-05-17 08:59:24 发布
最新推荐文章于 2024-05-17 08:59:24 发布
阅读量5.2k 收藏 27
点赞数
分类专栏： wx.miniprogram
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41581254/article/details/84973494
版权

1.在进入小程序的时候要判断是否有授权，如果没有授权，则要先授权之后，才能登陆到小程序的首页。
刚开始，我把login页当作了小程序的首页，这样导致如果已经授权过，这个页面也会一闪而过。用户体验不好。捋了一下思路之后认为，应该把授权的判断放在app.js中onLaunch生命周期里，首页还是正常的index页面。
在这里插入图片描述
若已经授权，获取用户信息，存在全局的data里，若没有授权，跳转到login页，进行授权操作

shouquan在这里插入图片描述
授权成功，获取用户信息成功之后，将用户信息存储在本地缓存中指定的 userInfo 中，然后跳转到小程序首页

3.之后不论在哪个页面，如果需要用户信息，从本地缓存中异步获取指定 userInfo 的内容即可
在这里插入图片描述

葵妹子
关注
  • 0
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序授权登陆
Wen_Tao98的博客
12-23 369
微信小程序授权登陆 讲解视频观看https://live.csdn.net/v/131706 微信小程序登陆授权 我们在项目中，登陆，授权页面，都必须要传递token值。 一般商品详情页面的商品收藏，加入购物车。购物车页面都需要传递token。 token是什么? token是前端鉴权的一种方式，token由后端生成，是由时效性的。 小程序如何登陆授权，拿到token wx.login—>wx.request—>后端—>小程序(腾讯)服务器 ...
微信小程序之授权登录
PinkCode
01-11 376
微信小程序之授权登录 之前微信授权登录时是直接可以通过getUserInfo接口 弹出授权弹窗。由于微信官方修改了 getUserInfo 接口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发 微信的官方解释如下 为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取
SpringCloud 微信小程序 获取手机号一键登录 【SpringCloud系列14】
代码小疯子
03-31 1089
SpringCloud 大型系列课程正在制作中，欢迎大家关注与提意见。自我提升方法推荐：神奇的早起早上 5:00 -5:20 起床刷牙5:30-6:00 晨练（跑步、跳绳、骑自行车、打球等等）6:00 - 6:30 英语晨读6:30-7:00 文学晨读7:20 早饭本文章是系列文章中的一篇本文章实现的是微信小程序获取微信绑定的手机号授权登录。实现微信小程序用户登录的方案有三种，本文章实现的是第二种。
微信小程序--登录授权，一键获取用户微信手机号并登录
热门推荐
诚(cheng)的博客
10-14 6万+
一、前言 由于微信官方修改了 getUserInfo 接口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发。官方连接：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 微信小程序登录流程时序 说明： 小程序调用wx.login() 获...
微信小程序之登录页实例 —— 微信小程序实战系列（5）(1)
最新发布
2401_84909864的博客
05-17 402
图片资源：name.pngkey.pngloginLog.jpglogin.wxml：账号密码登录login.wxss：page{height: 100%;}.container {height: 100%;display: flex;flex-direction: column;padding: 0;box-sizing: border-box;background-color: #f2f2f2}/登录图片/.login-icon{flex: none;}.login-img{width: 750rpx;
微信小程序授权登录三种实现方式
weixin_45559449的博客
03-08 4万+
通过wx.login获取 临时登录凭证code，向后端换取token。 可以做到无感登录；过button按钮的bindgetphonenumber事件，弹出手机号授权，获取到加密数据后，向后端换取token；通过button按钮的click事件，调用 wx.getUserProfile() 弹出授权框，获取到用户加密数据后，向后端换取token。
微信小程序跳转微信小程序实现免登录
weixin_42349568的博客
05-24 6513
一，基本过程 要实现的方式是甲小程序跳转乙小程序，并且乙小程序免登录。 具体的实现跳转过程，这篇博客已经讲得很详细了：https://blog.csdn.net/weixin_42349568/article/details/116937196 二，基本免登录的流程 三，代码细节 1，跳转到指定页面后发起第一个请求（有session的话，说明已经登陆） var obj = { session_3rd: that.session_3rd, sid: that.sid, } var res = await
uni-app实现微信小程序一键登录
qq_45797421的博客
06-29 6098
实现微信小程序的一键登录功能，需要用到button组件中的open-type开放能力 <button type="default" open-type="getUserInfo" @getuserinfo="wxLogin">一键登录微信小程序</button> 在methods中定义wxLogin方法，通过uni.login方法来获取 code值 wxLogin(e){ uni.login({ provider:"weixin", suc
微信小程序 授权登录详解（附完整源码）
10-16
主要介绍了微信小程序 授权登录详解（附完整源码）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序之微信授权登陆案例
10-23
下面我们将深入探讨微信小程序实现微信授权登录的相关知识点。 1. 微信开放平台注册与认证： 在实现微信授权登录前，开发者需要在微信开放平台上注册并完成企业或个人认证。认证后，可以创建小程序并获取到AppID，...
微信小程序授权登陆及每次检查是否授权实例代码
10-16
【微信小程序授权登陆】 在微信小程序中，授权登录是一个关键功能，它允许用户使用微信账号直接登录到小程序，简化了用户的注册和登录流程。微信小程序提供了`getUserInfo` API 来实现这一功能。以下是实现授权登录...
微信小程序 实例汇总 完整项目源代码
11-01
4. **API调用**：微信小程序提供了丰富的API接口，如网络请求、地图、位置、媒体、文件、用户授权等，开发者可以利用这些API实现各种功能。 5. **组件化开发**：小程序支持组件化开发，如view、button、image、...
微信小程序之登陆界面
12-02
本教程将深入探讨如何创建一个功能完善的微信小程序登陆界面，并确保其能够顺利跳转至其他页面。 首先，我们要理解微信小程序的基本架构。小程序使用的是基于 JavaScript 的 WXML（WeiXin Markup Language）和 WXSS...
小程序静默登录方案设计
arthur09的博客
07-20 838
首先谈谈在小程序的开发中，如何借助微信的能力标识一个用户? 微信官方提供了两种标识： OpenId是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。 UnionId是一个用户对于同主体微信小程序／公众号／APP 的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过UnionId，实现多个小程序、公众号、甚至 APP 之间的数据互通。 同一个用户的这两个 ID 对于同一个小程序来说是永久不变的，就算用户删了小程序，下次用户进入小程序，开发者依旧可..
【文章分享】微信小程序静默登录方案设计
Fantasywt的博客
08-02 2851
微信小程序静默登录方案设计。很多开发者会把wx.login和捆绑调用当成登录使用，其实wx.login已经可以完成登录，只是获取额外的用户信息。在wx.login获取到code后，会发送到开发者后端，开发者后端通过接口去微信后端换取到openid和sessionKey（现在会将unionid也一并返回）后，把自定义登录态(本业务命名为auth-token)返回给前端，就已经完成登录行为了。wx.login行为是静默，不必授权的，用户不会察觉。...
【微信小程序】新版获取手机号码实现一键登录（uniapp语法）(完整版附源码)
每天进步一点点, 靠近小目标一点点~
11-08 1万+
1.wx.login() 获取code, 2.步骤1拿到的code发送给服务端换取唯一用户标识openid 3.调getPhoneNumber() 获取phoneCode 4. 步骤3获取的phoneCode和步骤2拿到的openId一起传给服务端获取手机号 5. 完成登录
小程序 手机号一键登录
are_gh的博客
06-22 983
1. onshow 函数中 调用函数 wx.login获取 code码 2. 用户点击 一键登录 同意后 需要在 函数形参中拿到 iv encryptedData 以及错误信息 3.判断 错误信息 若成功 就将code encryptedData iv 三个参数 作为参数 调用后端接口 4.状态码 200 存储手机号 token 用户名 用户id 用relaunch 跳转到首页 状态码不是200 提示用户错误信息 // pages/login/login.js\ const app = getAp...
微信小程序——一键授权登录处理
月来better
07-05 1280
采用Promise.all()方法处理登录和授权 login.wxml: <button class='apply-btn' bindtap="toLogin" type='primary'> 授权登录 </button> utils/logins.js: // 授权 function wxGetUserProfile() { return new Promise((resolve, reject) => { wx.getUserProfile({
微信小程序之一键登录+api封装
lqlq54321的博客
06-07 1220
微信小程序接口封装+登录流程解析+获取用户手机号完成一键登录流程逻辑
帮我写一个微信小程序授权登陆代码
09-24
很好，这是一段示例代码，可以帮助您实现微信小程序的授权登录功能。 首先，在需要使用授权登录的页面的 `onLoad` 生命周期函数中，调用 `wx.getSetting` 方法来获取用户的授权信息： ``` wx.getSetting({ success(res) { if (res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success(res) { console.log(res.userInfo) } }) } } }) ``` 如果用户已经授权，那么 `res.authSetting['scope.userInfo']` 会返回 `true`，就可以直接调用 `wx.getUserInfo` 方法来获取用户的头像和昵称。 如果用户还未授权，那么就需要在界面上显示一个授权按钮，点击授权按钮时调用 `wx.login` 和 `wx.getUserInfo` 方法来获取用户的信息： ``` // 点击授权按钮 const handleGetUserInfo = (e) => { if (e.detail.userInfo) { // 用户点击了允许授权按钮 wx.login({ success(res) { if (res.code) { // 发送 res.code 到后台换取 openId, sessionKey, unionId console.log(res.code) } else { console.log('登录失败！' + res.errMsg) } } }) wx.getUserInfo({ success(res) { console.log(res.userInfo) } }) } else { // 用户点击了

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值