본문으로 건너뛰기

OpenID 제공자 설정

앱에 zkLogin을 통합하려면 available providers 중 적어도 하나의 OAuth client가 필요하다. 이 provider들의 Client ID와 redirect URI를 zkLogin 프로젝트에서 사용하게 된다. 예를 들어 다음 TypeScript 코드는 테스트를 위한 Google login URL을 구성한다.

const REDIRECT_URI = '<YOUR_SITE_URL>';

const params = new URLSearchParams({
	// OpenID provider로 client ID와 redirect URI를 구성한다
	client_id: $CLIENT_ID,
	redirect_uri: $REDIRECT_URI,
	response_type: 'id_token',
	scope: 'openid',
	// nonce 생성에 대한 자세한 내용은 아래를 참조한다
	nonce: nonce,
});

const loginURL = `https://accounts.google.com/o/oauth2/v2/auth?${params}`;

OpenID providers​

The following table lists the OpenID providers that can support zkLogin or are currently being reviewed to determine whether they can support zkLogin.

ProviderCan support?DevnetTestnetMainnet
FacebookYesYesYesYes
GoogleYesYesYesYes
TwitchYesYesYesYes
AppleYesYesYesYes
SlackYesYesNoNo
KakaoYesYesNoNo
MicrosoftYesYesNoNo
AWS (Tenant)*YesYesYesYes
Karrier OneYesYesYesYes
Credenza3YesYesYesYes
RedBullUnder reviewNoNoNo
AmazonUnder reviewNoNoNo
WeChatUnder reviewNoNoNo
Auth0Under reviewNoNoNo
OktaUnder reviewNoNoNo
  • Sui supports AWS (Tenant) but the provider is enabled per tenant. Contact us for more information.

Configuring an OpenID provider​

관련 provider에서 client ID(앞선 예시의 $CLIENT_ID)와 redirect URI(앞선 예시의 $REDIRECT_URI)를 구성하는 방법에 대한 안내를 보려면 탭을 선택한다.

  1. 브라우저에서 Google Cloud dashboard로 이동한다. Google Cloud account에 sign in하거나 등록한다.

  2. Google Cloud dashboard navigation을 사용해 APIs & Services > Credentials를 연다.

    1

  3. Credentials 페이지에서 CREATE CREDENTIALS > OAuth client ID를 선택한다.

    2

  4. 애플리케이션의 Application type과 Name을 설정한다.

    3

  5. Authorized redirect URIs 섹션에서 ADD URI 버튼을 클릭한다. field에 redirect URI 값을 설정한다. 이는 wallet 또는 application frontend여야 한다.

    4

  6. Create를 클릭한다. 성공하면 Google Cloud가 OAuth client created 대화상자와 함께 metadata를 표시하며, 여기에는 Client ID가 포함된다. 대화상자를 닫으려면 OK를 클릭한다.

이제 새 OAuth client가 Credentials 페이지의 OAuth 2.0 Client IDs 섹션에 나타나야 한다. client 옆에 표시되는 Client ID를 클릭해 값을 clipboard에 복사한다. redirect URI와 다른 client 데이터에 접근하려면 client 이름을 클릭한다.