[next/react] google identity platform API 테스트

앞서 말하자면 아래 url로 접속하면 튜토리얼이 잘 되어 있다.

https://console.cloud.google.com/customer-identity/providers?project=calendar-with&walkthrough_id=identity-platform--sign-in-user-email

 

1. Identity Toolkit API 를 사용 설정한다.

2. identity platform 을 사용설정한다 (추가하려는 프로젝트명이 맞는지 확인한다) (링크)

요렇게 표시할 공급업체가 없다라고 뜨면 OK

3. 공급업체 추가하기

구글이랑 email/password 방식의 공급업체를 추가했다

 

4. 테스트용 사용자 추가하기

참고) email/password 방식의 공급업체 추가가 안되어 있으면 비활성화되어 있음

나는 사용자 aaa@test.aa , aaaa1111 의 정보로 게정을 추가했다.

 

 

5. API 키로 Identity Platform 클라이언트 SDK 초기화

 

 

6. 구글에서 제공한 테스트 코드 & 화면

<script src="https://www.gstatic.com/firebasejs/8.0/firebase.js"></script>
<script>
  var config = {
    apiKey: "AIzaSyDDZwwUokxqtVwybqBTiQKVvWm9ZovfHE4",
    authDomain: "calendar-with.firebaseapp.com",
  };
  firebase.initializeApp(config);
</script>
<script>
    var email = "aaa@aaa.aa";
    var password = "test1234";
  
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        document.getElementById("message").innerHTML = "Welcome, " + user.email;
     } else {
        document.getElementById("message").innerHTML = "No user signed in.";
      }
    });
  
    firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
      document.getElementById("message").innerHTML = error.message;
    });
  </script>
<div>Identity Platform Quickstart</div>
<div id="message">Loading...</div>

 

 

 

7. 이제 이걸 내 프로젝트에 적용해보자

이건 다음 글에서...

 

 

 

 

참고)
- https://cloud.google.com/identity-platform/docs/use-rest-api?hl=ko#calling_the_api
- https://developers.google.com/identity/sign-in/web/sign-in?hl=ko

- https://cloud.google.com/identity-platform/docs/web/google?hl=ko