집 > 기사 > 위챗 애플릿 > 미니 프로그램 개발--사용자 로그인 및 유지 관리 예제 튜토리얼

미니 프로그램 개발--사용자 로그인 및 유지 관리 예제 튜토리얼

零下一度원래의: 2017-05-20 16:55:534887검색

사용자 로그인을 제공하고 사용자의 로그인 상태를 유지하는 것은 일반적으로 사용자 시스템이 있는 소프트웨어 애플리케이션이 수행해야 하는 작업입니다. WeChat과 같은 소셜 플랫폼의 경우 작은 프로그램 애플리케이션을 만들면 사용자 정보와의 연결을 완전히 분리하고 포기하는 순수한 도구 소프트웨어를 만드는 경우는 거의 없습니다.

사용자에게 로그인을 허용하고 사용자를 식별하고 사용자 정보를 얻는 것, 사용자 중심의 서비스를 제공하는 것은 대부분의 작은 프로그램이 하는 일입니다. 오늘은 미니 프로그램에서 사용자 로그인 방법과 로그인 후 세션(세션) 상태를 유지하는 방법에 대해 알아보겠습니다.

WeChat 미니 프로그램에서는 일반적으로 다음 세 가지 유형의 로그인 방법을 사용합니다.

자체 계정 등록 및 로그인
다른 타사 플랫폼 계정을 사용하여 로그인
WeChat 계정을 사용하여 로그인(즉, 현재 로그인된 WeChat 계정을 직접 사용하여 사용자로 로그인) 미니 프로그램 중)

현재 웹 애플리케이션에서 가장 일반적인 두 가지 방법은 WeChat 미니 프로그램에서도 사용할 수 있지만 결제가 필요합니다. 주의: <a href="http://www.php.cn/wiki/422.html" target="_blank">쿠키<code><a href="http://www.php.cn/wiki/422.html" target="_blank">Cookie</a> 메커니즘이 없습니다. 미니 프로그램을 사용하는 경우 2 이 방법을 사용하기 전에 귀하 또는 타사 API가 Cookie에 의존해야 하는지 확인하세요. 또한 미니 프로그램은 HTML 페이지를 지원하지 않으며 세 번째는 - 로그인을 위해 페이지 리디렉션을 사용해야 하는 party API는 개선이 필요하거나 더 이상 사용할 수 없습니다.

오늘은 세 번째 방법, 즉 WeChat 계정을 사용하여 로그인하는 방법을 주로 논의하겠습니다. 이 방법은 WeChat 플랫폼과 가장 밀접하게 통합되고 더 나은 사용자 경험을 제공하기 때문입니다.

로그인 과정

공식 미니 프로그램 문서의 로그인 흐름도를 인용하면, 전체 로그인 과정은 기본적으로 아래와 같습니다.

미니 프로그램 개발--사용자 로그인 및 유지 관리 예제 튜토리얼

로그인 흐름도

이 그림에서 "미니 프로그램"은 우리가 미니 프로그램 프레임워크를 사용하여 작성하는 코드 부분을 의미합니다. "타사 서버"는 일반적으로 "WeChat" 자체 백그라운드 서비스 프로그램입니다. 서버"는 WeChat 공식 API 서버입니다.

이 흐름도를 단계별로 분석해 보겠습니다.

1단계: 클라이언트에 현재 로그인된 WeChat 사용자 얻기 `登录凭证(code)`

미니 프로그램에 로그인하는 첫 번째 단계는 로그인 자격 증명을 얻는 것입니다. wx.login() 메소드를 사용하여 로그인 자격 증명을 얻을 수 있습니다.

주로 미니 프로그램의 실제 요구 사항에 따라 미니 프로그램의 앱 코드 또는 기타 페이지 코드에서 로그인 자격 증명 요청을 시작할 수 있습니다.

App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        var code = res.code;
        if (code) {
          console.log(&#39;获取用户登录凭证：&#39; + code);
        } else {
          console.log(&#39;获取用户登录态失败：&#39; + res.errMsg);
        }
      }
    });
  }
})

2단계: 로그인 자격 증명을 서버에 보내고 서버의 자격 증명을 사용하여 WeChat 서버를 WeChat 사용자의 `唯一标识(openid)` 및 `会话密钥(session_key)`

과 교환합니다. wx.request() 메소드를 사용하여 우리가 직접 구현한 백엔드 API를 요청하고 거기에 로그인 자격 증명(코드)을 가져옵니다. 예를 들어 이전 코드를 기반으로

App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        var code = res.code;
        if (code) {
          console.log(&#39;获取用户登录凭证：&#39; + code);

          // --------- 发送凭证 ------------------
          wx.request({
            url: &#39;https://www.my-domain.com/wx/onlogin&#39;,
            data: { code: code }
          })
          // ------------------------------------

        } else {
          console.log(&#39;获取用户登录态失败：&#39; + res.errMsg);
        }
      }
    });
  }
})

백엔드 서비스( /wx/onlogin)은 전달된 로그인 자격 증명을 사용하여 openid 및 session_key와 교환하여 WeChat 인터페이스를 호출해야 합니다. 인터페이스 주소 형식은 다음과 같습니다.

api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

여기에서는 코드를 사용했습니다. js가 구축한 백그라운드 서비스 Express는 참고용입니다:

router.get(&#39;/wx/onlogin&#39;, function (req, res, next) {
  let code = req.query.code

  request.get({
    uri: &#39;https://api.weixin.qq.com/sns/jscode2session&#39;,
    json: true,
    qs: {
      grant_type: &#39;authorization_code&#39;,
      appid: &#39;你小程序的APPID&#39;,
      secret: &#39;你小程序的SECRET&#39;,
      js_code: code
    }
  }, (err, response, data) => {
    if (response.statusCode === 200) {
      console.log("[openid]", data.openid)
      console.log("[session_key]", data.session_key)

      //TODO: 生成一个唯一字符串sessionid作为键，将openid和session_key作为值，存入redis，超时时间设置为2小时
      //伪代码: redisStore.set(sessionid, openid + session_key, 7200)

      res.json({ sessionid: sessionid })
    } else {
      console.log("[error]", err)
      res.json(err)
    }
  })
})

이 백그라운드 코드가 성공적으로 실행되면 openid와 session_key를 얻을 수 있습니다. 이 정보는 현재 WeChat 서버의 WeChat 계정 로그인 상태입니다.

단, 보안상의 이유로 이 정보를 미니 프로그램의 사용자 ID 및 세션 ID로 직접 사용하여 서버 측에서 자체 레이어를 만들어야 합니다. 세션, 이 WeChat 계정 로그인 상태에서 세션 ID를 생성하고 이를 자체 세션 메커니즘에서 유지한 다음 이 세션 ID를 세션 식별자로 사용하기 위해 미니 프로그램 클라이언트에 배포합니다.

서버 측에서 이 세션 메커니즘을 구현하는 방법과 관련하여 현재 일반적으로 Redis와 같은 키-값 저장 도구를 사용합니다. 각 세션에 대한 키로 고유한 문자열을 생성한 다음, redis에 값으로 session_key 및 openid를 저장합니다. 저장 시 시간 초과를 설정해야 합니다.

3단계: 클라이언트에 저장`sessionid`

웹 애플리케이션을 개발할 때 클라이언트(브라우저)에서는 일반적으로 세션 ID를 쿠키에 저장하지만 애플릿에는 없습니다. 쿠키 메커니즘이므로 쿠키를 사용할 수 없지만 미니 프로그램에는 로컬 저장소가 있으므로 저장소를 사용하여 후속 백그라운드 API 호출을 위해 세션 ID를 저장할 수 있습니다.

在之后，调用那些需要登录后才有权限的访问的后台服务时，你可以将保存在storage中的sessionid取出并携带在请求中（可以放在header中携带，也可以放在querystring中，或是放在body中，根据你自己的需要来使用），传递到后台服务，后台代码中获取到该sessionid后，从redis中查找是否有该sessionid存在，存在的话，即确认该session是有效的，继续后续的代码执行，否则进行错误处理。

这是一个需要session验证的后台服务示例，我的sessionid是放在header中传递的，所以在这个示例中，是从请求的header中获取sessionid：

router.get(&#39;/wx/products/list&#39;, function (req, res, next) {
  let sessionid = req.header("sessionid")
  let sessionVal = redisStore.get(sessionid)
  if (sessionVal) {
    // 执行其他业务代码
  } else {
    // 执行错误处理
  }
})

好了，通过微信账号进行小程序登录和状态维护的简单流程就是这样，了解这些知识点之后，再基于此进行后续的开发就会变得更容易了。

另外，腾讯前端团队也开源了他们封装的相关库，可以借鉴和使用。