React | Google Sign-in

양준식·2020년 8월 9일
0

Projects

목록 보기
1/2
post-thumbnail

Intro

  • Federated Identity
  • Google JavaScript SDK를 이용해서 FI를 구현하는 방법
  • 내부적으로는 OAuth라는 표준화된 인증 방법이 사용 >>> SDK를 사용하면 간편하게 구현 가능
  • 서버 사이드 기술을 이용하지 않고 구글 로그인을 구현해보자.
  • Client / Resource Owner(User) / Resource Server(Google)

Settings - Configure a Project
1. Google APIs >>> 프로젝트 생성
2. OAuth consent screen
3. Credentials > Create Credentials > OAuth client ID > Application type : Web application
Resource 서버에 Client를 등록해서 등록 번호와 등록 비밀번호를 발급 받음.

1. Integrating Google Sign-In into your web app


1-1. Create authorization credentials

Any application that uses OAuth 2.0 to access Google APIs must have authorization credentials that identify the application to Google's OAuth 2.0 server.

Steps to create credentials for your project

  • Go to the Credentials page
  • 사용자 인증 정보 만들기 > OAuth 클라이언트 ID
  • 애플리케이션 유형 >>> 웹 애플리케이션
  • 이름 >>> "manage students"(프로젝트 이름)
  • 만들기 >>> Client ID, Client Secret 생성됨
  • Configuration Done

After configuration is complete, take note of the client ID that was created. You will need the client ID to complete the next steps. (A client secret is also created, but you need it only for server-side operations.)


1-2. Load the Google Platform Library

1-3. Specify your app's client ID

You must include the Google Platform Library on your web pages that integrate Google Sign-In.

Specify the client ID you created for your app in the Google Developers Console with the google-signin-client_id meta element.

// index.html
<head>
  <!-- Google Sign-in -->
  <script src="https://apis.google.com/js/platform.js" async defer></script>
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
  <!-- End Google Sign-in -->
</head>

1-4. Add a Customized Google Sign-In button

참고 ) Building a custom Google Sign-In button

  • Customizing the automatically rendered sign-in button (recommended)

To create a Google Sign-In button with custom settings, add an element to contain the sign-in button to your sign-in page, write a function that calls signin2.render() with your style and scope settings, and include the https://apis.google.com/js/platform.js script with the query string onload=YOUR_RENDER_FUNCTION.

<div class="g-signin2" data-onsuccess="onSignIn"></div>
// <button onClick={onSignIn}>Google Sign In</button>

참고 ) Google Sign-In JavaScript client reference


1-5. Get profile information

  • After you have signed in a user with Google using the default scopes, you can access the user's Google ID, name, profile URL, and email address.
  • To retrieve profile information for a user, use the getBasicProfile() method.
function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

1-6. Sign out a user

  • (Next Sprint)

참고 자료 )

profile
양준식
실력, 심력, 체력, 영력의 균형있는 성장을 추구합니다.
다음 포스트

React | Apollo

0개의 댓글