首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

UniApp中开发微信小程序的授权登录流程

  • 25-02-15 00:41
  • 4732
  • 8699
blog.csdn.net

授权登录流程:

在UniApp中开发微信小程序的授权登录流程,主要涉及以下几个步骤:

1. 引入微信登录API

首先,确保在项目中引入了微信小程序的登录API。UniApp已经封装了相关API,可以直接使用。

2. 获取用户授权

用户需要授权小程序获取其基本信息。可以通过uni.getUserProfile或uni.getUserInfo来获取用户信息。

uni.getUserProfile({
  desc: '获取用户信息用于登录',
  success: (res) => {
    console.log('用户信息:', res.userInfo);
    // 这里可以获取到用户的昵称、头像等信息
  },
  fail: (err) => {
    console.error('获取用户信息失败:', err);
  }
});

3. 获取登录凭证(code)

使用uni.login获取登录凭证code,这个code用于后续向微信服务器换取openid和session_key。

uni.login({
  provider: 'weixin',
  success: (res) => {
    if (res.code) {
      console.log('登录凭证:', res.code);
      // 将code发送到服务器,换取openid和session_key
    } else {
      console.error('登录失败:', res.errMsg);
    }
  },
  fail: (err) => {
    console.error('登录失败:', err);
  }
});

4. 发送code到服务器

将获取到的code发送到你的服务器,服务器通过微信接口换取openid和session_key。

uni.request({
  url: 'https://your-server.com/api/login',
  method: 'POST',
  data: {
    code: res.code
  },
  success: (response) => {
    console.log('服务器返回:', response.data);
    // 服务器返回的openid和session_key
  },
  fail: (err) => {
    console.error('请求失败:', err);
  }
});

5. 服务器端处理

服务器接收到code后,调用微信的auth.code2Session接口,换取openid和session_key。

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
  • APPID: 小程序ID

  • SECRET: 小程序密钥

  • JSCODE: 客户端传来的code

6. 返回用户信息

服务器在获取到openid和session_key后,可以根据业务逻辑生成自定义的登录态(如token),并返回给客户端。

7. 客户端存储登录态

客户端接收到服务器返回的登录态后,可以将其存储在本地(如uni.setStorageSync),用于后续的接口请求。

uni.setStorageSync('token', response.data.token);

8. 检查登录状态

在每次启动小程序时,检查本地存储的登录态是否有效。如果失效,重新走登录流程。

const token = uni.getStorageSync('token');
if (!token) {
  // 重新登录
}

9. 用户信息更新

如果用户信息发生变化,可以通过uni.getUserInfo或uni.getUserProfile重新获取用户信息并更新到服务器。

10. 退出登录

用户退出登录时,清除本地存储的登录态。

uni.removeStorageSync('token');

注意事项

  • 用户隐私:获取用户信息时,必须明确告知用户用途,并获取用户授权。

  • 安全性:session_key是敏感信息,不应传输到客户端,应在服务器端妥善保管。

  • 接口调用频率:微信接口有调用频率限制,需合理设计登录流程,避免频繁调用。

通过以上步骤,你可以在UniApp中实现微信小程序的授权登录功能。

示例代码:

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. userInfo: null, // 用户信息
  6. token: null, // 登录态
  7. };
  8. },
  9. onLoad() {
  10. this.checkLoginStatus();
  11. },
  12. methods: {
  13. // 检查登录状态
  14. checkLoginStatus() {
  15. const token = uni.getStorageSync('token');
  16. if (token) {
  17. this.token = token;
  18. this.getUserInfo();
  19. } else {
  20. console.log('未登录');
  21. }
  22. },
  23. // 处理登录
  24. async handleLogin() {
  25. try {
  26. // 1. 获取用户信息
  27. const userInfo = await this.getUserProfile();
  28. this.userInfo = userInfo;
  29. // 2. 获取登录凭证 code
  30. const code = await this.getLoginCode();
  31. // 3. 发送 code 到服务器,换取 token
  32. const token = await this.sendCodeToServer(code);
  33. // 4. 存储 token
  34. uni.setStorageSync('token', token);
  35. this.token = token;
  36. console.log('登录成功');
  37. } catch (error) {
  38. console.error('登录失败:', error);
  39. }
  40. },
  41. // 获取用户信息
  42. getUserProfile() {
  43. return new Promise((resolve, reject) => {
  44. uni.getUserProfile({
  45. desc: '获取用户信息用于登录',
  46. success: (res) => {
  47. resolve(res.userInfo);
  48. },
  49. fail: (err) => {
  50. reject(err);
  51. },
  52. });
  53. });
  54. },
  55. // 获取登录凭证 code
  56. getLoginCode() {
  57. return new Promise((resolve, reject) => {
  58. uni.login({
  59. provider: 'weixin',
  60. success: (res) => {
  61. if (res.code) {
  62. resolve(res.code);
  63. } else {
  64. reject(new Error('获取 code 失败'));
  65. }
  66. },
  67. fail: (err) => {
  68. reject(err);
  69. },
  70. });
  71. });
  72. },
  73. // 发送 code 到服务器
  74. async sendCodeToServer(code) {
  75. try {
  76. const response = await uni.request({
  77. url: 'https://your-server.com/api/login', // 替换为你的服务器地址
  78. method: 'POST',
  79. data: {
  80. code: code,
  81. },
  82. });
  83. if (response.statusCode === 200 && response.data.token) {
  84. return response.data.token; // 假设服务器返回 token
  85. } else {
  86. throw new Error('服务器返回错误');
  87. }
  88. } catch (error) {
  89. throw new Error('请求服务器失败');
  90. }
  91. },
  92. // 获取用户信息(已登录时)
  93. getUserInfo() {
  94. // 这里可以根据 token 从服务器获取用户信息
  95. console.log('获取用户信息');
  96. },
  97. // 退出登录
  98. handleLogout() {
  99. uni.removeStorageSync('token');
  100. this.token = null;
  101. this.userInfo = null;
  102. console.log('退出登录成功');
  103. },
  104. },
  105. };
  106. script>
  107. <style>
  108. .container {
  109. display: flex;
  110. flex-direction: column;
  111. align-items: center;
  112. justify-content: center;
  113. height: 100vh;
  114. }
  115. style>

注:本文转载自blog.csdn.net的唐诺的文章"https://blog.csdn.net/zhijiandedaima/article/details/145468671"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

119
小程序
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2024 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top