위챗 미니프로그램

정보

Casdoor는 버전 1.41.0부터 위챗 미니 프로그램을 지원합니다.

소개

위챗 미니 프로그램은 표준화된 OAuth를 지원하지 않으므로, 로그인을 위해 자체 호스팅된 Casdoor 웹페이지로 리디렉션할 수 없습니다. 따라서, 위챗 미니 프로그램에서 Casdoor를 사용하는 과정은 일반 프로그램과 다릅니다.

이 문서에서는 위챗 미니 프로그램에 Casdoor를 통합하는 방법에 대해 설명합니다. 이 통합에 대한 예제는 여기 GitHub에서 찾을 수 있습니다: casdoor-wechat-miniprogram-example. 자세한 정보는 위챗 미니 프로그램 로그인 문서를 참조하십시오.

구성에는 다음과 같은 이름이 포함됩니다:
CASDOOR_HOSTNAME: Casdoor 서버가 배포된 도메인 이름 또는 IP 주소, 예를 들어, https://door.casbin.com.

단계 1: Casdoor 배포

먼저, Casdoor 서버를 배포해야 합니다.

Casdoor를 성공적으로 배포한 후에는 다음을 확인해야 합니다:

Casdoor에 정상적으로 접근하고 사용할 수 있습니다.
Casdoor의 origin 값을 (conf/app.conf) CASDOOR_HOSTNAME으로 설정하세요.

단계 2: Casdoor 애플리케이션 구성

Casdoor에 위챗 IDP를 생성하고 위챗 미니 프로그램 개발 플랫폼에서 제공하는 APPID와 APPSECRET를 제공하세요.
새로운 Casdoor 애플리케이션을 생성하거나 기존의 것을 사용하세요.
이전 단계에서 생성한 IDP를 사용하려는 애플리케이션에 추가하세요.

Tips

편의를 위해, Casdoor는 애플리케이션의 첫 번째 위챗 타입 IDP를 기본적으로 위챗 미니 프로그램 IDP로 취급합니다.

따라서, 이 앱에서 위챗 미니 프로그램을 사용하려면 하나의 앱에 여러 위챗 타입 IDP를 추가하지 마세요.

단계 3: 위챗 미니프로그램 코드 작성

위챗 미니 프로그램은 내부적으로 로그인하고 코드를 얻는 API를 제공합니다. 그런 다음 코드를 Casdoor에 보내야 합니다. Casdoor는 이 코드를 사용하여 위챗 서버에서 정보(예: OpenID 및 SessionKey)를 검색합니다.

다음 코드는 위의 과정을 어떻게 수행하는지 보여줍니다:

// Login in mini program
wx.login({
  success: res => {
    // This is the login code that needs to be sent to Casdoor
    console.log(res.code)

    wx.request({
      url: `${CASDOOR_HOSTNAME}/api/login/oauth/access_token`,
      method: "POST",
      data: {
        "tag": "wechat_miniprogram", // Required
        "client_id": "6825f4f0af45554c8952",
        "code": res.code,
        "username": this.data.userInfo.nickName, // Update user profile when you log in.
        "avatar": this.data.userInfo.avatarUrl,
      },
      header:{
        "content-type": "application/x-www-form-urlencoded",
      },
      success: res => {
        console.log(res)
        this.globalData.accessToken = res.data.access_token // Get Casdoor's access token
      }
    })
  }
})

tag 매개변수는 이것이 WeChat 미니 프로그램에서의 요청임을 Casdoor에 알리는 데 필수적이라는 점을 주의해야 합니다.

위의 코드는 로그인 중인 WeChat 미니 프로그램 사용자의 사용자 이름과 아바타 URI를 포함합니다. 이 두 매개변수를 별도로 전달하고 성공적인 로그인 및 액세스 토큰 획득 후에 Casdoor에 전달할 수 있습니다:

wx.getUserProfile({
  desc: 'share your info to Casdoor', 
  success: (res) => {
    this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
    })
    console.log(app.globalData.accessToken)
    wx.request({
      url: `${CASDOOR_HOSTNAME}/api/update-user`, // Casdoor URL
      method: "POST",
      data: {
        "owner": "test",
        "name": "wechat-oGk3T5tIiMFo3SazCO75f0HEiE7Q",
        "displayName": this.data.userInfo.nickName,
        "avatar": this.data.userInfo.avatarUrl
      },
      header: {
        "Authorization": "Bearer " + app.globalData.accessToken, // Bearer token
        "content-type": "application/json"
      },
      success: (res) => {
        console.log(res)
      }
    })
  }
})

또한, 필요한 Casdoor 작업에 대한 베어러 토큰으로 액세스 토큰을 사용할 수 있습니다.

Tips

현재 Casdoor는 기존 계정을 WeChat 미니 프로그램 사용자에게 연결할 수 없습니다. Casdoor가 WeChat에서 OpenID를 검색한 후, ID가 존재하지 않으면 새 사용자를 생성하거나, 존재하면 기존 사용자를 사용합니다.

소개​

단계 1: Casdoor 배포​

단계 2: Casdoor 애플리케이션 구성​

단계 3: 위챗 미니프로그램 코드 작성​

소개

단계 1: Casdoor 배포

단계 2: Casdoor 애플리케이션 구성

단계 3: 위챗 미니프로그램 코드 작성