구글 클라우드 플랫폼 : https://console.cloud.google.com/

 

로그인 후 접속

 

 

 

프로젝트 이름 설정 후 만들기

 

OAuth 동의 화면

 

외부 선택 후 만들기

 

앱 이름, 사용자 이메일, 로고가 있다면 등록

 

애플리케이션 홈페이지(ex), 개발자 연락처 정보 작성 한 다음 저장 후 계속

링크 안 써도 됨

 

 

범위 - 저장 후 계속

테스트 사용자 - 저장 후 계속

 

 

사용자 인증 정보 만들기

사용자 인증 정보 - 사용자 인증 정보 만들기 - QAuth 클라이언트 ID

 

애플리케이션 유형 선택 후 이름, URL1 작성 후 만들기

 

만들면 다음 창이 뜸. 클라이언트ID 복사하기

코드 복사 : https://developers.google.com/identity/sign-in/web

 

여기에 아까 복사한 코드 복붙 - login.html

<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
    <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log('Full Name: ' + profile.getName());
        console.log('Given Name: ' + profile.getGivenName());
        console.log('Family Name: ' + profile.getFamilyName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      }
    </script>
  </body>
</html>

 

서버 열기 - main.js

// node_modules의 express 패키지 가져오기
var express = require('express')
// app에 express 함수의 변환 값 저장
var app = express()

// 환경변수에서 port 가져오기. 만약 환경변수가 없다면 5502포트 지정
var port = app.listen(process.env.PORT || 5000);

// html 파일 연결
app.get('', (req, res) => {
    res.sendFile(__dirname + '/login.html')
})

// 서버 실행시 log 출력
app.listen(port, () => {
    console.log('서버 가동중')
})

 

터미널

 

완성

로그아웃 기능 구현

<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
      <!--로그아웃 버튼-->
      <button type="button" onclick="signOut();">Sing Out></button>
    
    <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log('Full Name: ' + profile.getName());
        console.log('Given Name: ' + profile.getGivenName());
        console.log('Family Name: ' + profile.getFamilyName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      }
      // 로그아웃 기능
      function signOut(){
        gapi.auth2.getAuthInstance().disconnect();
      }
    </script>
  </body>
</html>

 

'Backend' 카테고리의 다른 글

[Flask] 서버 설정, html 연결  (0) 2022.05.30
CK에디터 사용방법  (0) 2022.05.29
[JSP] JDK / WebServer - Tomcat / 이클립스 설치  (0) 2021.08.31
[Anaconda] 가상환경 생성  (0) 2021.08.05
[Node] 서버 생성  (0) 2021.08.04

티스토리툴바