【微信小程序】实现授权登入---超详细讲解_微信小程序登录

1,106 阅读4分钟
  1. 用户访问第三方网站或应用,并选择使用微信授权登录。

  2. 第三方网站或应用将用户重定向到微信登录页面。

  3. 用户在微信登录页面上输入自己的微信账号和密码,并进行身份验证。

  4. 用户确认是否授权第三方网站或应用访问自己的基本信息。

  5. 如果用户授权,微信将生成一个授权凭证(access_token)。

  6. 微信将用户重定向回第三方网站或应用,并将授权凭证传递给该网站或应用。

  7. 第三方网站或应用使用授权凭证来获取用户的基本信息,如昵称、头像等。

  8. 第三方网站或应用根据获取到的用户信息进行登录或验证身份的操作,使用户可以在该网站或应用上进行相关操作。

二、微信授权案例演示

1. 导入小程序授权登陆项目

        将资源里的mini-getUserProfile导入到微信开发者工具中。

 

2. 实现微信授权登陆案例演示

2.1 wx.login

        微信直接登陆2——是wx.login授权登陆的案例效果演示,效果演示如下。

 

2.2 wx.getUserProfile

        微信直接登陆1——wx.getUserProfile是授权登陆的案例效果演示,效果演示如下。需要将index.js中的canIUseGetUserProfile的属性值改为true。

 

3. 两种授权登陆的区别

        wx.login 和 wx.getUserProfile 是微信小程序中两个不同的授权接口,它们的作用和使用方式有一些区别。如下所示:

  1. wx.login:

  • 功能:wx.login 用于获取用户的登录凭证,即 code。
  • 授权范围:只获取用户的登录凭证,不包含用户的个人信息。
  • 使用方法:调用 wx.login 后,小程序会将用户的登录凭证(code)发送给小程序的开发者服务器,开发者服务器可以通过该凭证向微信服务器换取用户的唯一标识(openid)和会话密钥(session_key),用于后续的登录验证和数据交互。
  1. wx.getUserProfile:

  • 功能:wx.getUserProfile 用于获取用户的个人信息,如昵称、头像等。

  • 授权范围:获取用户的个人信息,需要用户授权。

  • 使用方法:调用 wx.getUserProfile 接口时,需要用户主动触发,并在回调函数中处理用户的授权结果。只有用户授权成功后,才能获取到用户的个人信息。

总结:

  • wx.login 是用于获取用户的登录凭证,用于进行登录验证和数据交互,不包含用户个人信息。

  • wx.getUserProfile 是用于获取用户的个人信息,如昵称、头像等,需要用户进行授权才能获取。

三、 微信授权登陆的流程

1. 授权登陆流程图

         该流程图详细的结合项目、开发工具以及微信接口服务器仔细的为我们描述了一个个授权登陆的不走及调用的函数方法和传输的参数。

2. 文字描述

 微信授权登录小程序的流程原理的细节如下:

  1. 用户在小程序中选择使用微信授权登录功能。

  2. 小程序调用 wx.login 接口,向微信服务器发起登录请求。

  3. 微信服务器验证小程序的合法性,如果合法,会返回一个临时登录凭证 code 给小程序。

  4. 小程序将收到的 code 发送到后台服务器。

  5. 后台服务器接收到 code 后,使用自己的 AppID 和 AppSecret,以及收到的 code,调用微信接口向微信服务器发送请求,获取用户的唯一标识 openid 和会话密钥 session_key。

  6. 后台服务器根据 openid 和 session_key,进行用户身份的验证和处理,可以将用户信息存储在后台数据库中。

  7. 后台服务器将验证结果返回给小程序。

  8. 小程序根据收到的验证结果,进行相应的登录状态处理,如登录成功后,显示用户相关的个性化内容。

注意:

        需要注意的是,小程序在获取到 code 后,必须将其发送到后台服务器进行二次验证和处理,因为直接使用 code 进行用户登录是不安全的。通过后台服务器的验证,可以确保用户的身份和信息安全。同时,后台服务器也可以拥有更多的灵活性和自定义功能,如用户信息的持久化存储和一些业务逻辑的处理。

3. 案例演示

3.1 导入演示项目

前端

        在微信开发者工具中导入oa-mini项目案例,这是前端页面效果代码