uniapp如何实现微信登录

Posted 2023-01-29 蓝匣子itbluebox

实现微信登录可以使用 uni.login() 方法，首先需要在微信开放平台注册小程序并获取 appid。

然后在 uni-app 项目中使用 uni.login() 方法获取 code，再通过 code 换取 openid 和 session_key。

实现微信登录的具体步骤如下：

1、在微信开放平台注册小程序并获取 appid。
2、在 uni-app 项目中使用 uni.login() 方法获取 code。

uni.login(
    provider: 'weixin',
    success: (res) => 
        // res.code 即为获取到的 code
    
);

3、通过 code 换取 openid 和 session_key。
可以通过向微信服务器发送请求来完成，请求地址为 https://api.weixin.qq.com/sns/jscode2session，

请求参数包括 appid、secret、js_code、grant_type。

const request = require('request');
const appid = 'YOUR_APPID';
const secret = 'YOUR_SECRET';

const url = `https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$res.code&grant_type=authorization_code`;

request.get(url, (error, response, body) => 
    if (!error && response.statusCode === 200) 
        const data = JSON.parse(body);
        // data.openid 和 data.session_key 即为获取到的 openid 和 session_key
    
);

4、将 openid 和 session_key 作为参数传递给后台服务器，由后台服务器完成登录操作。
可以使用 uni.request() 或者其他网络库向后台服务器发送请求，请求参数包括 openid 和 session_key。

5、在 uni-app 项目中使用 uni.getUserInfo() 方法获取用户信息。

uni.getUserInfo(
    provider: 'weixin',
    success: (userInfo) => 
        // userInfo 即为获取到的用户信息
    
);

6、将用户信息发送给后台服务器。
可以使用 uni.request() 或者其他网络库向后台服务器发送请求，请求参数包括用户信息。

7、后台服务器进行用户信息的存储和验证。

8、通过 uni.setStorageSync() 或 uni.setStorage() 将用户信息存储到本地，以便下次登录时使用。

9、在需要验证用户是否已登录时，可以使用 uni.getStorageSync() 或 uni.getStorage() 检查本地存储中是否有用户信息。

10、如果用户没有登录，可以使用 uni.navigateTo() 或 uni.redirectTo() 跳转到登录页面。

11、完成。
注意:
在微信小程序中，需要在微信开放平台配置登录回调域名。

在使用 uni.getUserInfo() 方法时，如果需要获取用户的手机号码等敏感信息，需要先在微信开放平台配置相应的权限。