个人中心 | 微信开放社区

App 登录配置与用户身份管理

我们在上节课程中对小程序项目做了多端升级，并初步做了简单的预览。大部分开发者在第一次运行过程中，都会出现登录失败等问题。绝大部分的小程序都使用 wx.login 做用户的快速登录，部分小程序还使用了手机号验证组件来完成登录操作。在从小程序到 APP 的构建转换过程中，最大的问题就是登录这一部分，因为 APP 是独立于微信之外，和微信平级运行在手机系统里，因此登录无法直接用微信内小程序快速登录形式。我们大概有以下几种思路，解决无法使用小程序登录的问题：你的业务后端服务，使用的是 unionid 而不是 openid，那么可以直接使用「微信开放平台-移动应用」的微信登录能力，小程序和移动应用在同一个「微信开放平台」下，同一个微信账号，获取到的 unionid 是一致的，只需要后端服务适配一下移动应用的换身份令牌的接口，就可以解决。你的后端服务使用的只有小程序 openid，多端框架提供了「唤起微信小程序登录」能力，可以直接跳转到微信，拉起多端应用所绑定的线上小程序，完成授权再返回 APP。这里获取的 code 跟小程序原本的 wx.login 一致，所以不需要后端服务改造，比较简单。除了上面两个登录方式之外，多端框架还提供了手机号和 AppleID 登录方式，还提供了用户身份管理的一系列 API。我们不需要自己开发就能够做到多登录要素绑定与解绑、注销用户等身份操作。本节我们就展开学习几种登录方式的实现过程，你需要根据自己的业务情况选择使用。（如果你原本的小程序没有使用「微信登录」或「快速手机验证组件登录」，只使用自建的账号密码，或者是公开浏览的，则不需要本章节的学习）一、多端APP登录方式目前多端框架提供的身份登录方式有如下几种：移动应用微信登录：使用「微信开放平台-移动应用」的微信登录能力，从APP跳转到微信直接授权唤起微信小程序登录：在登录时，跳转到微信，打开自己的线上小程序，完成授权再跳转回 APP，需要「移动应用」跳转微信能力。手机登录：通过发送短信验证码或快速验证手机号组件的方式，让用户通过手机号来做身份认证，目前手机验证码限时免费。Apple登录：只适用于 iOS 系统手机，需要配置 Bundle ID 等信息，通过用户授权 AppleID 账号完成登录过程。[图片] 在 APP 开发中，能完成身份认证的方式有很多种，除了框架提供的这些之外，你还可以使用账号密码、邮箱验证码、其他应用 Oauth 认证（微信登录里，微信就是 Oauth 的一个资源方）。多端框架并不会阻止你做自己的登录设计，而是会给你提供一系列的 API，帮助你能更简单做常见登录方式的实现。二、绑定移动应用如果你要使用「移动应用微信登录」或「唤起微信小程序登录」，就需要绑定「微信开放平台-移动应用」，下面是绑定步骤： 1.浏览器打开「多端应用控制台」，选择我们在上一步骤创建的同名应用，会提醒「开通身份管理」，如没有提醒则在左侧栏中进入「身份管理」。 [图片] 2.身份管理目前有「微信登录」和「其他登录」两种，其中「微信登录」的两个方式是「未配置」状态，我们绑定后就回变为「可使用」。 [图片] 3.点击「微信登录-唤起微信小程序登录」后面的「绑定移动应用」按钮，在弹出的对话框中填写和小程序同主体的「开放平台」账号和申请的移动应用 APPID（没有移动应用，请看下个步骤，如完成请直接看第 6 步） [图片] 4.如果没有「开放平台-移动应用」，我们需要先根据参考文档，完成整个注册过程，这里有几个 Tips，可以帮助你快速完成： a.第一步选择小程序一定选和前面相同的小程序。 b.应用运行流程图，不可以直接截图小程序线上的（可快速构建后，使用移动应用助手访问打开你的多端应用，从而实现截图），10张以内，且能大概说明主要功能点。 c.应用平台 iOS 和 Android 最少选 1 个，iOS 需要注册 Apple 开发者 program 信息（也可以写一些任意内容用于测试）。 d.Android 需要提供 3 个信息，应用市场路径（空着就好）、应用签名（看第5步，或随便写）、应用包名（用自己的服务器域名的反转域名，最后命名可以随意） 5.Android 正式上架需要一个有效签名，前期测试可以任意填签名信息。应用签名信息是根据打包的 apk 计算而来的，可以参看此文档完成，主要就是三个步骤： a.生成 Android 安装包所需的证书，可以用开发者工具创建，也可以用自己已有的，注意别名、密码和证书文件都保存好，这个是开发者层面的，可以用于多个应用程序。 b.使用证书构建一个 APK，这里直接用开发者工具，顶部「构建-打包生成APK」，在弹出的对话框中填写对应的内容，点击确定。（除了证书第一次需要填写之外，其他的都可以默认） [图片] c.打包的APK会保存在你设置的目录中，这里是项目目录的「dist」文件夹下，然后在工具顶部「运行」按钮左侧「设备下拉菜单」里，点击「Android 签名与公钥」，选择打包的 APK，点击「生成」按钮，就可以看到签名了。 [图片] 6.移动应用审核通过后，需要确认移动应用所在的「开放平台账号」处于已认证的状态，没有认证则需要认证通过。（这是必要条件，开放平台账号必须要已经认证，未认证的账号虽然也可以操作绑定，但在多端运行过程中，无法成功拉起微信登录） 7.当你具有「开放平台-移动应用」并通过审核之后，就可以绑定到多端应用中，如果「多端应用」和「移动应用」绑定了同一个微信号，就会展示同微信号的「移动应用」信息。你也可以自己输入开放平台账号和密码，以及移动应用APPID，来完成这个绑定过程。 [图片] 8.点击确定后，绑定完成的状态如下，会展示已经绑定的「移动应用」，以及其相关配置，包括 iOS 和 Android 平台的配置信息。你可以随时更换和解除绑定，如果要改 iOS 和 Android 平台的配置信息，需要直接去开放平台对应修改并重新提交审核。 [图片] 9.绑定「移动应用」后，登录配置的「微信登录」会变为可用状态，接下来我们就可以完成相关改造过程。 [图片] 三、唤起微信小程序登录「唤起微信小程序登录」虽然简单，但是有比较严格的条件限制，请仔细阅读以下几条，如有一条不满足则直接放弃，直接看后面的课程。 1.唤起小程序登录依赖「开发平台-移动应用」的APP唤起微信能力，目前只有已认证的开放平台账号下申请的移动应用才具备此能力；而只有非个人主体的开放账号才可以进行认证。总而言之，你需要准备一个非个人主体的已认证的开放平台账号，并申请移动应用并审核通过，这是必要条件。 2.「多端应用」和「微信小程序」以及「开放平台-移动应用」的绑定前提是：这三个属于同一主体，由于第一条限制，则这三个必须是非个人主体。 3.申请「开放平台-移动应用」时，开发配置要同时选「Android应用」和「iOS应用」，如果不选其中一个，那不选的这个端，在测试时无法拉起微信。（比如只填 Android，不选 iOS，那么你在 iPhone 手机测试时，就拉不起来微信，直接报 -70000 失败），应用的参数信息，可以看本节后面的内容。 [图片] 如果你满足上述条件，我们就开始实现「唤起小程序登录」。主要分两个部分：在微信小程序中嵌入一个授权页编译多端应用并预览到设备第一部分，在微信小程序中嵌入一个授权页。为什么要这么做呢？在这里简单讲一下我们的多端应用在设备中是独立运行的，应用的代码又没有任何的改动，直接运行就一定会出现 wx.login 登录的问题。由于我们独立运行的多端应用没有微信账号体系，所以 wx.login 也不能给你返回哪个微信用户的 code。如果你仍然坚持不改代码，就想用 wx.login 直接实现微信授权登录，多端框架这如何解决呢？框架的思路是，在多端里没法直接拿到小程序的 code，而移动应用的微信授权又和小程序的 code 转换不一样（如果这样搞你还需要改服务器的 code 转 openid 的代码逻辑），在不改前后端逻辑的情况下，框架只能去小程序借用 code，于是大概流程就变成这样： [图片] 多端应用走到 wx.login 逻辑后，展示一个跳转微信确认页，用户点击后，会跳转到微信并打开你的小程序，然后你的小程序里执行 wx.login 获取 code，再把这个 code 返回给多端应用，这样就可以实现一个代码不改就能搞定登录了。但这里有一个问题，那就是不同小程序都有自己的业务逻辑，框架必须要找一个合适的通用的位置去执行 wx.login 获取 code 并返回多端应用。所以需要开发者在微信小程序嵌入一个授权页。这个授权页是框架提供的，你需要通过一定的步骤完成这个嵌入授权页的过程，如果要正式发布，也需要将这个授权页发布到线上版。（本质上这个授权页就是一个小程序页面，唯一的功能就是为多端应用透传 code 的，所以真的要正式用这个，小程序也要发布线上版） [图片] 如何嵌入授权页？以下几个步骤：在多端应用模式下，点击「工具-配置小程序登录服务」 [图片] 在弹出的对话框中点击「确认」按钮，IDE就会自动为你配置成功 [图片] [图片] 主要在小程序的 app.json 中添加了一个配置，这个配置会在打包编译时自动带入授权页。授权页不会出现在你的项目代码中，你也不需要对其实现。 [图片] 配置完成后，我们需要转回「小程序模式」，发布预览到自己的微信客户端，后面我们测试多端APP跳转登录时，需要保证设备的微信上，有包含授权页的小程序，如果你要正式上线，则同样需要操作「上传」，将带有授权页的小程序按正常流程审核发布现网。 [图片] 这部分更多问题指引，可以参考文档：快速接入小程序登录服务 | 微信开放文档第二部分，编译多端应用并预览到设备点击进入 project.miniapp.json 配置页面，根据你的手机机型，勾选 open sdk [图片] [图片] 一开始打开多端应用，执行到 wx.login 时，应用会跳转到登录页，然后从登录页跳转到微信拉起小程序，并让用户从小程序的授权页点击允许，整体大概是如下效果： [图片] 从上图可以看到，框架默认提供的登录页并不能很好的和自己的业务页面风格融合，接下来我们来自定义登录页。首先我们需要在小程序中创建一个多端登录 Page，按照下图所示创建一个，名为 login （名字可以随意） [图片] 在 login 页面中，我们简单做一下页面，效果如下： [图片] 在 tominiprogram 触发函数中，关键代码如下： [图片] 这里有两个关键的接口，wx.weixinMiniProgramLogin 和 wx.getMiniProgramCode，我们分别来解释一下： weixinMiniProgramLogin：跳转微信拉起小程序授权，用户授权后，多端框架会将用户身份拿回 APP 做置换，这个置换是框架自动完成的，主要是在 APP 记录了真实的微信用户身份，而这个身份是从小程序中授权携转过来的。所以这个接口执行完毕并成功返回后，你可以当做 APP 已经隐式登录了真实微信身份（但这个登录是有限的，具体后面讲）。getMiniProgramCode：这个接口可以调用绑定微信小程序 wx.login 的 code，因为在前面已经完成了身份登录，所以这里实际返回的信息，跟该微信用户在小程序中 wx.login 得到的一致，都可以换相同的 openid 信息。既然通过 wx.getMiniProgramCode 可以拿到和小程序 wx.login 一样的信息，那么服务端就不需要改造，直接用原来的 sns/code2session 接口就能够顺畅的跑下来。另外你也可以在 weixinMiniProgramLogin 的回调中获取获取 code（也可以主动调用 wx.getIdentityCode 获取)，需要注意这个 code 和 wx.login 的 code 不一样，使用专门的接口来解析该 code，具体查看接口文档。你在服务器中通过接口获取 code 信息格式大概如下： { "errcode": 0, "errmsg": "ok", "login_info": { "type": "weixinMiniProgram", "login_time": 1726587697 }, "user_info": { "miniprogram_info": { "appid": "wxa697aed42badf0ca", "openid": "ou3Zf5cDQTlntEJKzMJ9Oc58aSow", "unionid": "ohIz45tdAFqDP_KeZqzeVyZtUNIg" }, "user_id": "ufabe95f51b0f2a6776157862e90cfb6c" } } 这里的信息分两块： login_info 表示了当前登录是通过什么方式完成的，比如上面例子里 weixinMiniProgram 表示是使用微信小程序登录。user_info 表示了当前登录的用户信息，包括 user_id （多端身份管理的用户标识），以及各种登录方式具体的身份信息，在这个例子中可以拿到 miniprogram_info （微信小程序登录能获取的信息，比如关键的 openid 和 unionid）在拉起小程序登录时，你可以通过配置 app.miniapp.json 来设置拉起小程序的相关信息，包括： adapteByMiniprogram.userName：承载授权页的小程序authorizeMiniprogramType：拉起小程序的版本（1-开发版，0-正式版，2-体验版）miniprogramLoginPath：展示登录页（默认时_default_，效果就是本节开头截图的样式，也可以换成自建页面路径）adaptWxLogin：多端APP是否适配 wx.login，开启后在执行 wx.login 时，会直接跳转登录页完成登录逻辑，如果是自定义登录页，建议将其关闭。[图片] 四、微信登录使用「微信开放平台-移动应用」的微信登录能力，从APP跳转到微信直接授权。多端框架帮我们封装了一层，因此我们实现微信登录会非常简单。核心代码如下： Page({ toweixin(){ wx.showLoading({ title: '登录中', mask: true }) wx.weixinAppLogin({ success () { wx.hideLoading() // 登录成功后，直接调用 wx.getIdentityCode 获取 code }, fail(e) { wx.hideLoading() console.log('微信登录失败', e) wx.showToast({ title: '小程序登录失败', icon: 'error' }); } }) } }) 在 wxml 中构造一个「微信登录」字样的按钮，绑定 toweixin 方法，用户点击后会自动切换到微信客户端，拉起授权允许页面，用户允许后直接返回多端应用，就会触发 wx.weixinAppLogin 的 success 回调。登录成功后，多端应用就拥有身份状态了，你可以调用 wx.getIdentityCode 来获取 code，需要注意这个 code 和 wx.login 的 code 不一样，你需要使用专门的接口来解析该 code，具体查看接口文档。你在服务器中通过接口获取 code 信息格式大概如下： { "errcode": 0, "errmsg": "ok", "login_info": { "type": "weixinApp", "login_time": 1726582094 }, "user_info": { "openapp_info": { "appid": "wx435af04f70f771f7", "openid": "oimKbiEzJf6JNJs_zK7G_yVvgUvs", "unionid": "ohIz4AFKeVy5teZqzqDP_dZtUNIg", "nickname": "ZiraLi", "headimgurl": "http://wx.qlogo.cn/mmhead/ZHK9X5JK58zNYibpKPNPDBlOKCvCqTzEfnx3TESeysblKnyiaMXQibrAQ/0" }, "user_id": "uf532928d7126543b189083274201f87c" } } 这里的信息分两块： login_info 表示了当前登录是通过什么方式完成的，比如上面例子里 weixinApp 表示是使用微信登录。user_info 表示了当前登录的用户信息，包括 user_id （多端身份管理的用户标识），以及各种登录方式具体的身份信息，在这个例子中可以拿到 openapp_info （微信登录能获取的信息，比如关键的 openid 和 unionid）五、手机号登录手机号登录分两个方式，发送验证码登录和快速登录，我们一一展示：首先是验证码登录，关键步骤有两个： 1.发送验证码：必须使用按钮 open-type 形式来发起验证码发送，具体看文档。 <button open-type="sendPhoneSms" bindsendphonesms="sendsms" phoneNumber="{{phonetel}}">发送验证码</button> 2.验证码登录：通过收到的短信验证码和手机号登录，具体看文档。 Page({ loginsms(){ wx.showLoading({ title: '登录中', mask:true }) wx.phoneSmsLogin({ phoneNumber: that.data.phonetel, // 页面输入的手机号，发送验证码后最好将其固定 verifyCode: that.data.phonecode, // 页面输入的验证码 success (res) { wx.hideLoading() console.log(res) // 将获取的 res.code 发送到服务器进行身份验证 wx.showToast({ title: '手机号登录成功', icon: 'success' }); }, fail(e){ wx.hideLoading() console.log(e) wx.showToast({ title: '手机号登录失败', icon: 'error' }); } }) } }) 在测试时，可以直接使用控制台的测试号进行登录实验，如需正式使用，需要先按照此指引备案一下，否则发送验证码时虽然提示成功，但手机不会收到验证码。快速登录方式，是直接通过运营商返回手机号信息，来进行登录认证的。主要分两个步骤： 1.调用 wx.getPhoneMask：此接口将检查当前设备支持的 SIM 卡信息，如果信息有效，将返回对应的手机号掩码，否则将直接报失败，使用前需查看文档中的注意事项。（建议在真要登录时进行调用，不要无脑直接在页面 onLoad 中直接调，如果 APP 已经登录身份了，就不要执行它了） Page({ getMask(){ const that = this wx.getPhoneMask({ success (res) { that.setData({ phonemask: res.phoneMask }) } }) } }) 2.当获取手机掩码之后，我们可以构建一个 open-type 为 phoneOneClickLogin 的按钮，用户点击后，在 bindphoneoneclicklogin 回调方法中会获得登录成功的信息。 <button wx:if="{{phonemask!=null}}" open-type="phoneOneClickLogin" bindphoneoneclicklogin="loginnosms">快速登录({{phonemask}})</button> Page({ loginnosms(e){ if(e.detail.code!=null){ // 将获取的 code 发送到服务器进行身份验证 } } }) 在手机号登录后，APP 已经登录了身份信息，此时可以调用 wx.getIdentityCode 来获取 code，需要注意这个 code 和 wx.login 的 code 不一样，你需要使用专门的接口来解析该 code，具体查看接口文档。你在服务器中通过接口获取 code 信息格式大概如下： { "errcode": 0, "errmsg": "ok", "login_info": { "type": "phoneOneClick", "login_time": 1726584653 }, "user_info": { "phone_info": { "phone": "12388886666" }, "user_id": "u5d0a68103768719d74f82bdf1c0d519f" } } 这里的信息分两块： login_info 表示了当前登录是通过什么方式完成的，比如上面例子里 phoneOneClick 表示是使用手机号快速登录。user_info 表示了当前登录的用户信息，包括 user_id （多端身份管理的用户标识），以及各种登录方式具体的身份信息，在这个例子中可以拿到 phone_info （包含完整的手机号）六、管理登录身份在前面三部分内容中，我们都可以完成 APP 的身份登录过程，并且通过 code2Verifyinfo 接口我们能够发现在新登录时，多端身份管理会自动创建 user_id。这个 user_id 是基于多端身份管理的，实际上是包含微信登录、微信小程序登录、手机号登录、AppleID 登录等多种登录方式的。也就意味着，多端身份管理，支持多个登录方式互相绑定，当用户通过任意登录方式登录进来后，同时也能获取其他登录方式的信息。比如用户使用手机号登录后，APP 可以直接获取微信登录的 openid，反过来也是如此。这里需要注意，绑定关系只在「微信登录」、「手机号登录」、「AppleID登录」三者之间可存在，「微信小程序登录」是个独立的，不能与其他任意登录方式绑定。如果你不需要其他的登录方式，只想用微信小程序登录来实现，那么直接用即可；如果你想引入更多登录方式，并且在形态上不以小程序身份为主，就需要一些改造，小程序登录和微信登录共有一个 unionid，因此你可以在业务层面适配这一层，通过微信登录接替小程序登录。接下来我们重点学习一下如何绑定各个登录方式，首先我们需要完成三者的任意登录方式，然后再去执行另外两个登录方式的绑定方法。 1.手机号绑定，调用 wx.miniapp.bindPhone 方法完成，具体看文档。 Page({ bindsms(){ wx.showLoading({ title: '绑定中', mask:true }) wx.miniapp.bindPhone({ phoneNumber: that.data.phonetel, verifyCode: that.data.phonecode, success () { wx.hideLoading() wx.showToast({ title: '手机号绑定成功', icon: 'success' }); // 调用 wx.getIdentityCode 获取 code，完成信息更新 }, fail(e){ wx.hideLoading() console.log(e) wx.showToast({ title: '手机号绑定失败', icon: 'error' }); } }) } }) 2.微信绑定，调用 wx.miniapp.bindWeixin 方法完成，具体看文档。 Page({ bindweixin() { wx.showLoading({ title: '绑定中', mask: true }) wx.miniapp.bindWeixin({ success () { wx.hideLoading() // 调用 wx.getIdentityCode 获取 code，完成信息更新 }, fail: (e) => { wx.hideLoading() console.log('微信绑定失败', e) wx.showToast({ title: '微信绑定失败', icon: 'error' }); } }) } }) 3.Apple 账号绑定，调用 wx.miniapp.bindApple 方法完成，具体看文档。 Page({ bindweixin() { wx.showLoading({ title: '绑定中', mask: true }) wx.miniapp.bindApple({ success () { wx.hideLoading() // 调用 wx.getIdentityCode 获取 code，完成信息更新 }, fail: (e) => { wx.hideLoading() console.log('AppleID 绑定失败', e) wx.showToast({ title: 'AppleID 绑定失败', icon: 'error' }); } }) } }) 如果在绑定之前，已经使用相应方式登录过一次，就会有身份信息，此时就不允许该登录方式绑定至其他身份上去，你需要先注销该登录方式下的身份账号才能绑定。在服务端中，涉及到身份管理的 API 如下：注销账号：unregisterUser | 微信开放文档解绑微信：unbindWeixin | 微信开放文档解绑手机号：unbindPhone | 微信开放文档解绑苹果账号：unbindApple | 微信开放文档以上 4 个 API 输入内容均为 user_id，这里的 user_id 从 code2Verifyinfo 接口中取出，下面介绍一下每个 API 的作用：注销账号：将注销 user_id 绑定的所有登录身份信息，注销后所有登录方式会释放，允许再次登录和绑定至其他身份 user_id解绑微信：将该 user_id 下的微信登录信息剔除，剔除后的微信登录信息，允许再次登录和绑定至其他身份 user_id解绑手机号：将该 user_id 下的手机号登录信息剔除，剔除后的手机号登录信息，允许再次登录和绑定至其他身份 user_id解绑苹果账号：将该 user_id 下的苹果登录信息剔除，剔除后的苹果登录信息，允许再次登录和绑定至其他身份 user_id如果 user_id 下只有一个登录信息，则不允许解绑，只能通过账号注销掉，或者绑定其他方式，换掉这个登录。接下来展示所有方式都绑定时的用户信息： { "errcode": 0, "errmsg": "ok", "login_info": { "type": "phoneOneClick", "login_time": 1726584653 }, "user_info": { "openapp_info": { "appid": "wx435af04f70f771f7", "openid": "oimKbiEzJf6JNJs_zK7G_yVvgUvs", "unionid": "ohIz4AFKeVy5teZqzqDP_dZtUNIg", "nickname": "ZiraLi", "headimgurl": "http://wx.qlogo.cn/mmhead/ZHK9X5JK58zNYibpKPNPDBlOKCvCqTzEfnx3TESeysblKnyiaMXQibrAQ/0" }, "phone_info": { "phone": "12388886666" }, "apple_info": { "bundleid": "wiueyweuoiywoeiuw", "apple_user_id": "7612t12y128i12i" }, "user_id": "u5d0a68103768719d74f82bdf1c0d519f" } } 从上面的讲解中可以看到，多端框架的身份管理，提供了一个多重身份管理的功能，如果你没有自建登录体系，可以直接使用这一套来完成搭建。但如果你已经自建了登录体系，可以直接忽略，直接使用 code2Verifyinfo 接口取相应信息，完成验证登录过程。身份管理这里因为业务不同，开发者之间的方案多样性很大，本节课程只全方位的讲解多端框架提供的身份管理能力，具体如何使用还需要你结合自身需求完成规划。 [图片]

GitHub账号

选择需要上架的开放服务

案例类型