사용자에게 로그인을 허용하고 사용자를 식별하고 사용자 정보를 얻는 것, 그리고 사용자 중심의 서비스를 제공하는 것이 대부분의 미니 프로그램들이 하는 일입니다. 오늘은 미니 프로그램에서 사용자 로그인 방법과 로그인 후 세션 상태를 유지하는 방법에 대해 알아보겠습니다. [관련 학습 권장 사항: Mini 프로그램 개발 튜토리얼]
WeChat Mini 프로그램에서는 일반적으로 다음 세 가지 유형의 로그인 방법을 사용합니다:
- 자체 계정 등록 및 로그인
- 다른 플랫폼 계정 사용 로그인
- WeChat 계정을 사용하여 로그인합니다(즉, 현재 로그인된 WeChat 계정을 사용하여 미니 프로그램 사용자로 직접 로그인합니다).
첫 번째와 두 번째 방법은 현재 웹 애플리케이션에서 가장 일반적인 두 가지 방법입니다. 위챗 미니 프로그램에서도 사용할 수 있습니다. 하지만 미니에는 쿠키가 없다는 점에 유의하세요. 프로그램 > 메커니즘이므로 이 두 가지 방법을 사용하기 전에 귀하 또는 타사 API가 쿠키에 의존해야 하는지 확인하세요. 또한 미니 프로그램은 HTML 페이지를 지원하지 않으므로 페이지를 사용해야 합니다. 리디렉션 로그인에 사용되는 타사 API를 수정해야 하거나 더 이상 사용할 수 없습니다. Cookie的机制，所以在使用这2种方式前，请确认你们或第三方的API是否需要依赖Cookie；还有小程序中也不支持HTML页面，那些需要使用页面重定向来进行登录的第三方API就需要改造，或不能用了。
我们今天主要来讨论一下第三种方式，即如何使用微信账号进行登录，因为这种方式和微信平台结合最紧密，用户体验比较好。
登录流程
引用小程序官方文档的登录流程图，整个登录流程基本如下图所示：
该图中，“小程序”指的就是我们使用小程序框架写的代码部分，“第三方服务器”一般就是我们自己的后台服务程序，“微信服务器”是微信官方的API服务器。
下面我们来逐步分解一下这个流程图。
步骤一：在客户端获取当前登录微信用户的登录凭证(code)
在小程序中登录的第一步，就是先获取登录凭证。我们可以使用wx.login()方法并得到一个登录凭证。
我们可以在小程序的App代码中发起登录凭证请求，也可以在其他任何Page页面代码中发起登录凭证请求，主要根据你小程序的实际需要。
步骤二：将登录凭证发往你的服务端，并在你的服务端使用该凭证向微信服务器换取该微信用户的唯一标识(openid)和会话密钥(session_key)
首先，我们使用wx.request()方法，请求我们自己实现的一个后台API，并将登录凭证（code）携带过去，例如在我们前面代码的基础上增加：
你的后台服务接着需要使用这个传递过来的登录凭证，去调用微信接口换取openid和session_key
我们先来介绍下openid，用过公众号的童鞋应该对这个标识都不陌生了，在公众平台里，用来标识每个用户在订阅号、服务号、小程序这三种不同应用的唯一标识，也就是说每个用户在每个应用的openid都是不一致的，所以在小程序里，我们可以用openid来标识用户的唯一性。
那么session_key是用来干嘛的呢？有了用户标识，我们就需要让该用户进行登录，那么 session_key 就保证了当前用户进行会话操作的有效性，这个session_key是微信服务端给我们派发的。也就是说，我们可以用这个标识来间接地维护我们小程序用户的登录态，那么这个session_key是怎么拿到的呢？我们需要在自己的服务端请求微信提供的第三方接口 https://api.weixin.qq.com/sns/jscode2session
从这几个参数，我们可以看出，要请求这个接口必须先调用wx.login()来获取到用户当前会话的code。那么为什么我们要在服务端来请求这个接口呢？其实是出于安全性的考量，如果我们在前端通过request调用此接口，就不可避免的需要将我们小程序的appid和小程序的secret暴露在外部，同时也将微信服务端下发的session_key暴露给“有心之人”，这就给我们的业务安全带来极大的风险。除了需要在服务端进行session_key的获取，我们还需要注意两点：
3단계: 3rd_session 생성
앞서 언급했듯이 session_key는 로그인 상태를 "간접적으로" 유지하는 데 사용됩니다. 소위 간접이란 사용자의 로그인 상태 정보를 자체적으로 유지해야 함을 의미합니다. 여기에서는 WeChat 서버에서 배포한 session_key를 비즈니스 당사자의 로그인 상태로 직접 사용하는 경우 "관심 있는 사람"이 wx.getUserInfo() 인터페이스는 WeChat 사용자의 민감한 정보를 해독하는 데 필요합니다. <code>wx.getUserInfo()这个接口呢，就需要session_key来配合解密微信用户的敏感信息。
那么我们如果生成自己的登录态标识呢，这里可以使用几种常见的不可逆的哈希算法，比如md5、sha1等，将生成后的登录态标识（这里我们统称为'skey'）返回给前端，并在前端维护这份登录态标识(一般是存入storage)。而在服务端呢，我们会把生成的skey存在用户对应的数据表中，前端通过传递skey来存取用户的信息。
步骤四：在客户端保存Session ID
开发Web应用的时候，在客户端（浏览器）中，我们通常将Session ID存放在cookie中，但是小程序没有cookie机制，所以不能采用cookie了，但是小程序有本地的storage，所以我们可以使用storage来保存Session ID，以供后续的后台API调用所使用。
在之后，调用那些需要登录后才有权限访问的后台服务时，你可以将保存在storage中的Session ID取出并携带在请求中（可以放在header中携带，也可以放在querystring中，或是放在body中，根据你自己的需要来使用），传递到后台服务，后台代码中获取到该Session ID后，从redis中查找是否有该Session ID存在，存在的话，即确认该session是有效的，继续后续的代码执行，否则进行错误处理。
前面我们将skey存入前端的storage里，每次进行用户数据请求时会带上skey，那么如果此时session_key过期呢？所以我们需要调用到wx.checkSession()
그렇다면 자체 로그인 상태 ID를 생성하면 어떻게 될까요? 여기서는 md5, sha1 등과 같은 몇 가지 일반적인 취소할 수 없는 해시 알고리즘을 사용하여 생성된 로그인 상태 ID를 반환할 수 있습니다(여기에서는 이를 총칭하여 'skey'라고 합니다). ) 프런트엔드에서 이 로그인 상태 ID를 프런트엔드에 유지합니다(일반적으로 저장소에 저장됨). 서버 측에서는 생성된 스키를 사용자에 해당하는 데이터 테이블에 저장하고 프런트 엔드에서는 스키를 전달하여 사용자의 정보에 액세스합니다.
4단계: 클라이언트에 세션 ID 저장
웹 애플리케이션을 개발할 때 클라이언트(브라우저)에서는 일반적으로 세션 ID를 쿠키에 저장하지만 애플릿에는 쿠키 메커니즘이 없으므로 세션 ID를 저장할 수 없습니다. 쿠키를 사용하지만 미니 프로그램에는 로컬 저장소가 있으므로 저장소를 사용하여 후속 백그라운드 API 호출을 위해 세션 ID를 저장할 수 있습니다.
나중에 접속을 위해 로그인이 필요한 백그라운드 서비스를 호출할 때 저장소에 저장된 세션 ID를 꺼내서 요청에 담을 수 있습니다(헤더나 쿼리 문자열에 담을 수도 있고, 아니면 본문에 넣을 수도 있습니다). 필요에 따라 사용) 백그라운드 코드에서 세션 ID를 얻은 후 세션 ID가 Redis에 존재하는지 확인하고 세션이 If인지 확인합니다. 유효하면 후속 코드 실행을 계속하고, 그렇지 않으면 오류 처리를 수행합니다.
이전에는 사용자 데이터를 요청할 때마다 키를 가져왔습니다. 그러면 이때 session_key가 만료되면 어떻게 될까요? 따라서 현재 session_key가 만료되었는지 확인하려면 wx.checkSession() API를 호출해야 합니다. 이 API는 session_key에 대한 정보 매개변수를 전달할 필요가 없지만 WeChat 애플릿이 이를 자체적으로 조정합니다. . 자체 서비스를 사용하여 사용자가 가장 최근에 생성한 session_key가 만료되었는지 쿼리합니다. 현재 session_key가 만료되면 사용자가 다시 로그인하여 session_key를 업데이트하고 사용자 데이터 테이블에 최신 키를 저장하도록 합니다.
5단계: 이모티콘 표현 저장 지원
사용자의 WeChat 이름을 데이터 테이블에 저장해야 하는 경우 데이터 테이블과 데이터 열의 인코딩 형식을 확인하세요. 사용자의 WeChat 이름에는 이모티콘 아이콘이 포함될 수 있고 일반적으로 사용되는 UTF8 인코딩은 1-3바이트만 지원하므로 이모티콘 아이콘은 정확히 4바이트의 인코딩으로 저장됩니다.
여기에는 두 가지 방법이 있습니다(mysql을 예로 들어):
1. 저장 문자 집합 설정
mysql5.5.3 버전 이후에는 데이터베이스, 데이터 테이블 및 데이터의 문자 집합을 설정하는 것이 지원됩니다. 열을 utf8mb4로 지정하므로 기존 테이블을 인코딩하는 경우 기본 문자 세트 인코딩 및 서버 측 인코딩을 설정한 후 /etc/my.cnf
[client]
default-character-set=utf8mb4
[mysql]
default-character-set=utf8mb4
[mysqld]
character-set-client-handshake = FALSE
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci
로그인 후 복사
데이터베이스 문자 집합을 utf8mb4
ALTER DATABASE 数据库名称 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;
로그인 후 복사
로 설정데이터 테이블 문자 집합을 utf8mb4
ALTER TABLE 数据表名称 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
로그인 후 복사
로 설정데이터 열 필드 문자 집합을 utf8mb4
ALTER TABLE 数据表名称 CHANGE 字段列名称 VARCHAR(n) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
로그인 후 복사
COLLATE로 설정 저장된 문자를 정렬하고 비교하는 데 사용되는 정렬 문자 집합을 나타냅니다. utf8mb4에는 일반적으로 사용되는 두 가지 조합인 utf8mb4_unicode_ci 및 utf8mb4_general_ci가 있습니다. 표준 유니코드 조합 알고리즘(UCA)을 기반으로 하기 때문에 일반적으로 utf8mb4_unicode_ci를 사용하는 것이 좋습니다. 다양한 언어로 정렬을 정확하게 수행할 수 있습니다. 이 두 가지 정렬 방법의 구체적인 차이점은 utf8_general_ci와 utf8_unicode_ci의 차이점은 무엇입니까
2를 참조하세요. Sequelize 문서
{
dialect: 'mysql', // 数据库类型
dialectOptions: {
charset: 'utf8mb4',
collate: "utf8mb4_unicode_ci"
},
}로그인 후 복사
첨부: 백엔드 코드(tp5)
🎜🎜🎜🎜🎜🎜🎜🎜
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !
위 내용은 미니프로그램에서 사용자 로그인은 어떻게 하나요? 로그인 상태를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
