Wijmo에서 OAuth2 클래스를 이용한 인증

Wijmo에서 OAuth2 클래스를 이용한 인증 > 블로그 & Tips

Wijmo에서 OAuth2 클래스를 이용한 인증

추천0

페이지 정보

작성자 GrapeCity

작성일 2020-05-28 00:00 조회 2,455회 댓글 0건

본문

관련링크

이 최근 문서의 샘플에서는 OAuth2 컴포넌트를 사용하여 클라이언트 인증을 수행합니다.

OAuth2 컴포넌트는 Google의 GAPI 라이브러리에 대한 얇은 래퍼입니다. OAuth2 클래스를 사용하려면 이 클래스의 인스턴스를 만들어 다음 매개 변수로 전달하십시오.

API_KEY: 호출 응용 프로그램을 식별하는 키입니다. 이 키는 개인 데이터에 액세스하지 않는 API를 이용한 인증에 사용됩니다. API 키는 이 키를 사용할 권한이 있는 도메인과 그 범위를 일반적으로 제한합니다.
CLIENT_ID: 응용 프로그램이 사용할 리소스를 소유한 Google 계정을 식별하는 키입니다.
SCOPES: 응용 프로그램에 필요한 인증을 정의하는 문자열이 포함된 배열(예: Google Sheets, Firestore 데이터베이스 또는 Google Drive의 파일에 액세스)입니다.

Authorization with OAuth2 Class in Wijmo

JavaScript 응용 프로그램에서 Authorization(인증) 클래스 사용하기

OAuth2 클래스가 만들어졌으면 다음 작업을 할 수 있습니다.
signIn 및 signOut 메서드를 호출하여 응용 프로그램에서 로그인하거나 로그아웃합니다.
userChanged 이벤트를 수신 대기하여 사용자가 방금 로그인 또는 로그아웃했는지 여부를 파악합니다.
user 속성을 보고 사용자가 로그인했는지 여부를 확인합니다.
현재 사용자의 accessToken을 가져와 인증이 필요한 서버 호출에 사용될 수 있게 합니다.
다음 예에서는 앞서 설명한 샘플이 OAuth2 클래스를 어떻게 사용하는지 보여줍니다.

 // instantiate the OAuth2 class  
 const SCOPES = [ '[https://www.googleapis.com/auth/userinfo.email](https://www.googleapis.com/auth/userinfo.email)' ]  
 let auth = new OAuth2(API_KEY, CLIENT_ID, SCOPES);  
 // click button to log user in or out  
 oAuthBtn.addEventListener('click', () => {  
     if (auth.user) {  
         auth.signOut();  
     } else {  
         auth.signIn();  
     }  
 });  
 // update button/sheet state when user changes  
 auth.userChanged.addHandler(s => {

     // update button caption  
     let user = s.user;  
     oAuthBtn.textContent = user ? 'Sign Out' : 'Sign In';

     // update GoogleSheet and Firestore access token   
     gsNWind.accessToken = user ? s.accessToken : null;  
     fsNWind.accessToken = user ? s.accessToken : null;  
 });

보시다시피 OAuth2 클래스를 통해 사용자 인증을 매우 손쉽게 사용할 수 있습니다. 하지만 그 이면에서 대량의 관련 작업을 모두 수행하는 것은 GAPI 라이브러리와 Google의 OAuth 서비스입니다.

OAuth2에서 우리가 받는 주된 서비스는 인증을 위해 GoogleSheets 및 Firestore 클래스에 필요한 accessToken 문자열입니다. 액세스 토큰을 제공할 수 있는 다른 인증 서비스를 사용하려는 경우에는 OAuth2 클래스가 필요 없습니다.

라이브 데모 실행