uni-app实现一键登录(企业版:因为获取手机号功能**目前针对非个人开发者**,所以个人开发者无法唤起获取手机号界面)

微信授权登录

用户在使用小程序时,其实已登录微信,其本质上就是:微信授权给小程序读取微信用户信息
在这里插入图片描述

获取登录凭证(企业版)

前端:调用 wx.login() 接口获取登录凭证(code)。

后端:通过凭证(code)向微信服务器生成用户登录态

<script setup lang="ts">
import {
   
    onLoad } from '@dcloudio/uni-app'

// 获取 code 登录凭证
let code = ''
onLoad(async () => {
   
   
  const res = await wx.login()
  code = res.code
})
</script>

:::

uni-app实现微信登录功能,主要依赖于微信提供的登录接口和uni-app封装的相关API。以下是实现微信登录功能的具体方法和步骤。 ### 微信小程序登录流程 微信官方自2021年4月起调整了登录接口规范,旧版 `uni.getUserInfo` 仅能获取匿名数据(如默认用户名“微信用户”),无法获取真实用户信息(如头像、昵称等)。因此,必须使用 `uni.getUserProfile` 来获取用户敏感信息,且需用户主动触发(如点击事件)[^1]。 #### 1. 获取用户授权登录 通过 `uni.login` 方法获取临时登录凭证 `code`,然后将 `code` 发送给后端服务器,由服务器向微信接口请求获取用户的 `openid` 和 `unionid` 等信息[^3]。 ```javascript uni.login({ provider: 'weixin', success: function(loginRes) { const code = loginRes.code; // 将 code 发送到后端以获取 openid 和 unionid uni.request({ url: 'https://your-server.com/api/login', method: 'POST', data: { code: code }, success: function(res) { // 处理后端返回的用户信息 console.log(res.data); } }); }, fail: function(err) { console.error(err); } }); ``` #### 2. 获取用户信息(需用户主动授权) 使用 `uni.getUserProfile` 方法获取用户的敏感信息,如昵称、头像等。该方法必须由用户主动触发(如点击按钮)才能调用。 ```javascript uni.getUserProfile({ desc: '获取用户信息', success: function(userInfoRes) { const userInfo = userInfoRes.userInfo; // 处理用户信息 console.log(userInfo); }, fail: function(err) { console.error('获取用户信息失败', err); } }); ``` #### 3. 第三方登录返回结构 在调用 `uni.login` 成功后,返回的对象格式如下: ```json { "code": "***", "authResult": { "openid": "***", "scope": "snsapi_userinfo", "refresh_token": "**", "code": "****", "unionid": "***", "access_token": "***", "expires_in": 7200 }, "errMsg": "login:ok" } ``` 其中 `openid` 是用户的唯一标识,`unionid` 是用户在同一个微信开放平台账号下的唯一标识,`access_token` 是访问微信接口的凭证,`expires_in` 表示 `access_token` 的有效期为 7200 秒(2 小时)[^2]。 ### 注意事项 - **用户授权**获取用户敏感信息必须通过 `uni.getUserProfile`,并且必须由用户主动触发,不能自动调用。 - **code 有效期**:`code` 是一次性的,且有效期为 5 分钟,需尽快发送到后端进行验证。 - **安全性**:敏感操作(如获取 `openid` 和 `unionid`)应在后端完成,避免暴露 `appid` 和 `appsecret`。 - **错误处理**:在调用过程中,需处理各种失败情况,如网络请求失败、用户拒绝授权等。 ### 代码示例:完整登录流程 ```javascript // 触发微信登录 function wxLogin() { uni.login({ provider: 'weixin', onlyAuthorize: true, success: function(loginRes) { const code = loginRes.code; // 发送 code 到后端获取用户信息 uni.request({ url: 'https://your-server.com/api/login', method: 'POST', data: { code: code }, success: function(res) { // 处理后端返回的用户信息 console.log('登录成功', res.data); }, fail: function(err) { console.error('请求后端失败', err); } }); }, fail: function(err) { console.error('登录失败', err); uni.hideLoading(); uni.showToast({ icon: 'none', title: '登录失败,请重试' }); } }); } ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值