uniapp登录流程

uni.login(OBJECT)登录

H5平台登陆注意事项:

微信内嵌浏览器运行H5版时,可通过js sdk实现微信登陆,需要引入一个单独的js,详见普通浏览器上实现微信登陆,并非开放API,需要向微信申请,仅个别开发者有此权限H5平台的其他登陆,比如QQ登陆、微博登陆,uni-app未封装,请在条件编译里按普通H5写法编写。

OBJECT 参数说明

参数名 类型 必填 说明 平台差异说明provider String 否 登录服务提供商,通过 uni.getProvider 获取,如果不设置则弹出登录列表选择界面
scopes String/Array 见平台差异说明 授权类型,默认 authbase。支持 authbase(静默授权)/ authuser(主动授权) / authzhima(芝麻信用) 支付宝小程序timeout Number 否 超时时间,单位ms 微信小程序、百度小程序success Function 否 接口调用成功的回调
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名 说明authResult 登录服务商提供的登录信息,服务商不同返回的结果不完全相同errMsg 描述信息

uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(loginRes.authResult);
  }
});

uni.checkSession检查登录状态是否过期

属性 类型 必填 说明success function 否 接口调用成功的回调函数fail function 否 接口调用失败的回调函数complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)

uni.getUserInfo(OBJECT)获取用户信息。

UNI-APP 开发微信公众号(H5)JSSDK 的使用方式

在 uniapp 中可以使用模块方式引用微信 js-sdk ,微信官网直接下载的使用有问题,可以使用 jweixin-module。

安装

下载使用方式下载地址:https://unpkg.com/jweixin-module@1.4.1/out/index.js

使用、

var jweixin = require('jweixin-module')  
jweixin.ready(function(){  
    // TODO  
});
``
`
一、小程序:

1、使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

2、使用 open-data 展示用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

provider String 否 登录服务提供商,通过 uni.getProvider 获取
withCredentials Boolean 否 是否带上登录态信息。 微信小程序、头条小程序lang Number 否 指定返回用户信息的语言,默认为 en。更多值请参考下面的说明。 微信小程序timeout Number 否 超时时间,单位 ms。 微信小程序success Function 否 接口调用成功的回调
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)

userInfo 参数说明

参数 类型 说明 平台差异说明nickName String 用户昵称
openId String 该服务商唯一用户标识 5 AppavatarUrl String 用户头像

```javascript
uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(loginRes.authResult);
    // 获取用户信息
    uni.getUserInfo({
      provider: 'weixin',
      success: function (infoRes) {
        console.log('用户昵称为:'   infoRes.userInfo.nickName);
      }
    });
  }
});

调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。

注意:

会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。临时登录凭证 code 只能使用一次

uni.getProvider(OBJECT)获取服务供应商。仅App平台支持。

在App平台,可用的服务商,是打包环境中配置的服务商,与手机端安装了什么app没有关系。

云打包在manifest中配置相关模块和SDK信息,离线打包在原生工程中配置。某个服务商配置被打包进去,运行时就能得到相应的服务供应商。

### UniApp 实现微信登录功能流程 #### 配置应用基本信息 为了使应用程序能够通过微信进行授权登录,需先在 `manifest.json` 文件的 APP 模块下配置好微信公众平台分配给开发者的 appid[^1]。 ```json { "mp-weixin": { "appid": "wxXXXXXX" } } ``` #### 获取用户同意并取得临时票据 code 当用户点击页面上的按钮触发登录操作时,前端会调用微信开放平台提供的 JS-SDK 方法 wx.login() 来发起请求。此方法用于获取用户的临时登陆凭证(code),该凭证仅能被用来换取 session_key 和 openid 等信息一次有效。 ```javascript uni.login({ provider: 'weixin', success(res) { console.log('login res:', res); const { code } = res; // 将 code 发送到服务器端交换 access_token 及其他必要数据 uni.request({ url: '/your-server-endpoint', // 替换成实际的服务端地址 method: 'POST', data: { js_code: code }, success(serverRes) { console.log('server response:', serverRes.data); } }); } }); ``` #### 后台处理逻辑 服务端接收到由客户端传递过来的 code 参数之后,利用官方 API 接口 https://api.weixin.qq.com/sns/jscode2session?grant_type=authorization_code&js_code={code}&appid={APPID}&secret={SECRET} 进行网络请求来完成最终的身份验证过程,并返回相应的 openId 给到前端以便后续业务场景下的身份识别使用[^2]。 ```java // Spring Boot Controller 示例代码片段 @RestController @RequestMapping("/wechat") public class WeChatController { @PostMapping("/auth") public ResponseEntity<?> auth(@RequestParam String js_code){ RestTemplate restTemplate = new RestTemplate(); String url = "https://api.weixin.qq.com/sns/jscode2session"; UriComponentsBuilder builder = UriComponentsBuilder.fromHttpUrl(url) .queryParam("grant_type", "authorization_code") .queryParam("js_code", js_code) .queryParam("appid", "YOUR_APP_ID") // 使用自己的 App ID .queryParam("secret", "YOUR_APP_SECRET"); // 使用自己的 App Secret ResponseEntity<String> responseEntity = restTemplate.getForEntity(builder.toUriString(), String.class); return ResponseEntity.ok(responseEntity.getBody()); } } ``` #### 用户资料拉取 (可选步骤) 如果还需要进一步获取用户的昵称头像等公开信息,则可以在上述基础上继续执行额外的操作以获得更详细的个人信息。这通常涉及到再次向微信服务器发出带有适当权限范围内的访问令牌的新一轮 HTTP 请求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值