小程序登录用户开发 第1篇
获取session_key和openid
若出现code been used错误提示，说明授权码已被使用过，请重新获取
用户进入到小程序的时候。需要获取当前微信用户的相关信息，比如昵称、头像等，这样才能够进入到小程序进行操作。是基于微信登录来实现小程序的登录功能，没有采用传统账户密码登录的方式。若第一次使用小程序来点餐，就是一个新用户，需要把这个新的用户保存到数据库当中完成自动注册。
小程序登录用户开发 第2篇
此开发者采用nodejs+express框架，监听端口为3000，主要提供三个服务，分别是 /login ,/checklogin, /credit等服务，login为用户登录服务，checklogin为校验用户登录，credit为查询用户信用分。服务器代码如下所示：
部署方法如下：
1. 准备工作 安装 启动命令行，切换工作目录到当前目录。
2. 打开，找到如下代码，填写你的 appid 和 secret。 const wx = { appid: '', secret: '' }
3. 执行如下命令，启动服务器 node
此程序界面设计比较简单，从上至下分别是头像选择按钮，昵称填写框、获取用户积分按钮等，具体代码如下所示：
wxss代码如下所示：
在文件的App({})中编写代码，实现小程序启动时自动执行登录操作，具体步骤为：
（1）定义页面所需的数据。
（2）启动时调用login()方法。
详细代码如下：
此程序中，登录成功后，会将服务器返回的token保存在globalData和数据缓存中，再次启动小程序时，先判断token是否存在，如不存在，则执行登录操作，如存在，先验证token是否有效，如无效则执行登录，否则在控制台输出“is_login: true”,详细代码如上所示。
在小程序中，为“获取用户积分”按钮，绑定tap事件（i文件中），代码为：
事件处理函数为credit()在文件中，在函数中，先判断用户是否登录，如未登录则显示_用户不存在，或未登录_，如已登录，则调用()方法向服务器申请查询积分，如请求成功返回积分。详细代码如下所示。
在界面中定义了button组件和image组件，用于选择头像或展示头像，定义input组件输入昵称。在中定义onChooseAvatar()函数，获取头像信息的临时路径，
代码如下：
此文论述微信小程序的用户登录功能实现方法和步骤，分别思路、知识、界面、逻辑四个方面进行论述，具体方法是在开发者服务器中完成登录请求、登录用户校验、在小程序的 使用onLaunch()函数完成小程序启动时自动登录，在中编写相应的事件处理函数完成头像选择、昵称填写、查询积分等功能。
小程序登录用户开发 第3篇
登录在英文中是 「login」，对应的还有 「logout」。而登录之前，你需要拥有一个账号，就要 「register」（or sign up）。
话说一开始的产品是没有登录/注册功能的，用的人多了就慢慢有了。出于产品本身的需求，需要对「用户」进行身份识别。
在现实社会中，我们每个人都有一个身份ID：身份证。当我到了16岁的时候，第一次去公安局领身份证的时候，就完成了一次「注册」行为。然后我去网吧上网，身份证刷一下，完成了一次「登录」行为。
那么对于虚拟世界的互联网来说，这个身份证明就是「账号+密码」。
常见的登录/注册方式有：
账号密码注册
在互联网的早期，个人邮箱和手机覆盖度小。所以，就需要用户自己想一个账号名，我们注册个QQ号，就是这种形式。
邮箱地址注册
千禧年之后，PC互联网时代快速普及，我们都创建了属于自己的个人邮箱。加上QQ也自带邮箱账号。由于邮箱具有个人私密性，且能够进行信息的沟通，因此，大部分网站开始采用邮箱账号作为用户名来进行注册，并且会在注册的过程中要求登录到相应邮箱内查收激活邮件，验证我们对该注册邮箱的所有权。
手机号码注册
在互联网普及之后，智能手机与移动互联网发展迅猛。手机也成为每个人必不可少的移动设备，同时移动互联网也已经深深融入每个人的现代生活当中。所以，相较于邮箱，目前手机号码与个人的联系更加紧密，而且越来越多的移动应用出现，采用手机号码作为用户名的注册方式也得到了广泛的使用。
到了 2020 年，微信用户规模达 12 亿。那么，微信账号，起码在中国，已成为新一代互联网世界的「身份标识」。
而对微信小程序而言，天然就能知道当前用户的微信账号ID。微信允许小程序应用，能在用户无感知的情况下，悄无声息的「登录」到我们的小程序应用中去，这个就是我们经常称之为的「静默登录」。
其实微信小程序的登录，跟传统 Web 应用的「单点登录」本质是一样的概念。
单点登录：在 A 站登录了，C 站和 B 站能实现快速的「静默登录」。
微信小程序登录：在微信中，登录了微信账号，那么在整个小程序生态中，都可以实现「静默登录」。
由于 Http 本来是无状态的，业界基本对于登录态的一般做法：
cookie-session：常用于浏览器应用中
access token：常用于移动端等非浏览器应用
在微信小程序来说，对于「JS逻辑层」并不是一个浏览器环境，自然没有 Cookie，那么通常会使用 access token 的方式。
小程序登录用户开发 第4篇
作为一套可复用的小程序登录方案，当然需要去定义好前后端的交互协议。
那么整套登录流程下来，需要的接口有这么几个：
静默登录 silentLogin
后端利用 code 跟微信客户端换取用户标识，然后注册并登录用户，返回自定义登录态 token 给前端
token 前端会存起来，每个请求都会带上
userInfo 需要包含nickname和phone字段，前端用于计算当前用户的授权阶段。当然这个状态的记录可以放在后端，但是我们认为放在前端，会更加灵活。
token: 自定义登录态凭证
userInfo: 用户信息
code: 产自 ()
入参：
出参：
说明：
更新用户信息 updateUser
后端解密微信开放数据，获取隐蔽数据，如：unionId 等
后端支持更新包括 nickname等用户基本信息。
前端会把 userInfo 信息更新到 session 中，用于计算授权阶段。
userInfo：更新后的最新用户信息
nickname: 用户昵称
encrypt: 微信开放数据相关的 iv, encryptedData
以及其他如性别地址等非必要字段
入参：
出参：
说明：
更新用户手机号 updatePhone
后端解密开放式局，获取手机号，并更新到用户信息中。
前端会把 userInfo 信息更新到 session 中，用于计算授权阶段。
userInfo：更新后的最新用户信息
encrypt：微信开放数据相关的 iv, encryptedData
入参：
出参：
说明：
解绑手机号 unbindPhone
入参：-
出参：-
说明：后端解绑用户手机号，成功与否，走业务定义的前后端协议。
登录 logout
入参：-
出参：-
说明：后端主动过期登录态，成功与否，走业务定义的前后端协议。
最后我们来梳理一下整体的「登录服务」的架构图：
由「登录服务」和「底层建设」组合提供的通用服务，业务层只需要去根据产品需求，定制授权的流程 ，就能满足大部分场景了。
本篇文章通过一些常见的登录授权场景来展开来描述细节点。
整理了「登录」、「授权」的概念。
然后分别针对「登录」介绍了一些关键的技术实现：
静默登录
静默登录异步状态的处理
自定义登录态过期的容错处理
微信 session_key 过期的容错处理
而对于「授权」，会有设计UI部分的逻辑，还需要涉及到组件的拆分：
组件拆分与设计
权限拦截的处理
然后，梳理了这套登录授权方案所依赖的后端接口，和给出最简单的参考协议。
最后，站在「秉着沉淀一套通用的小程序登录方案和服务为目标」的角度，梳理了一下架构层面上的分层。
业务定制层
登录服务层
底层建设
以上就是微信小程序登录前端的设计与实现详解的详细内容！