Browse Source

add google login

thomas 3 years ago
parent
commit
1d2d6e8292

+ 44 - 0
public/accessdata.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="google-signin-client_id" content="398214166622-jkme0i3k4tbsgqh19aejaqatrark5l94.apps.googleusercontent.com">
+    <title>GetAccess Data</title>
+  </head>
+  <body>
+    <h1>Get Google Token</h1>
+    <div id="my-signin2"></div>
+
+    <script>
+      function onSuccess(googleUser) {
+        console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
+        const idToken = googleUser.getAuthResponse().id_token;
+        window.location.href = '/?id_token='+idToken
+      }
+      function onFailure(error) {
+        alert(error);
+        console.log(error);
+      }
+      function renderButton() {
+        gapi.signin2.render('my-signin2', {
+          'scope': 'profile email',
+          'width': 240,
+          'height': 50,
+          'longtitle': true,
+          'theme': 'dark',
+          'onsuccess': onSuccess,
+          'onfailure': onFailure
+        });
+      }
+    </script>
+
+    <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
+    <script>
+      const code = (new URLSearchParams(window.location.search)).get('code')
+      console.log({code})
+    </script>
+
+  </body>
+</html>

+ 24 - 0
public/index.html

@@ -4,13 +4,37 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="google-signin-client_id" content="398214166622-jkme0i3k4tbsgqh19aejaqatrark5l94.apps.googleusercontent.com">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="https://apis.google.com/js/platform.js" async defer></script>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
+    <div>
+      <script>
+        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('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()); // This is null if the 'email' scope is not present.
+          console.log('Id Token: ', googleUser.getAuthResponse().id_token); // Send this to server for identification.
+        }
+
+        function signOut() {
+          var auth2 = gapi.auth2.getAuthInstance();
+          auth2.signOut().then(function () {
+            console.log('User signed out.');
+          });
+        }
+
+      </script>
+    </div>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

+ 15 - 0
src/assets/js/__message-util.ts

@@ -36,6 +36,21 @@ export function getMessage(param: any, ucpId: string | null = null): FisAppReque
   } as CommandMessageParameter) as FisAppRequestMessage;  
 }
 
+export function getLoginMessageByGoogleIdToken(idToken: string, timeout: number|null = null){
+  const basic: any = {
+    messageType: AppMessageType.Command, 
+    messageName: "Login", 
+    command: Command.Start,
+    data: {
+      authenticationType: 'google_id_token',
+      idToken
+    },
+  }
+  if(timeout != null) basic.data['timeout'] = timeout
+
+  return getMessage(basic);
+}
+
 export function getLoginMessage(timeout: number|null = null){
   const basic: any = {
     messageType: AppMessageType.Command, 

+ 97 - 0
src/components/GoogleLogin.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+      <h3>Google IdToken</h3>
+      <button :disabled="loginDisabled()" @click="loginUsingIdToken">Login</button>
+      <a style="margin: 0em 1em; " href="accessdata.html">GET</a>
+      <div v-if="idToken" style="overflow: hidden; font-size: xx-small; margin: 1em 0em; ">{{ idToken }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+
+import Trottle from 'lodash/throttle'
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import { getLoginMessageByGoogleIdToken } from '../assets/js/__message-util';
+
+@Component
+export default class GoogleLogin extends Vue {
+  @Prop() public connection;
+  idToken: string = ''
+
+  // @Watch('connection')
+  // updateConn(value, oldValue) {
+  //   console.log('updateconn')
+  //   this.conn = value
+  // }
+
+  loginDisabled(){
+    if ( this.idToken == null ) return true;
+    return this.idToken == null || this.connection.socketId == null
+  }
+  mounted(){
+      this.idToken = (new URLSearchParams(window.location.search)).get('id_token')
+  }
+
+  // async startSession() {
+  //   const ucpId = await this.getResponse( getLoginMessageByGoogleIdToken(this.idToken, 10000), 'signin', (response) => {
+  //     console.log('response2', response)
+  //     const ucpId = response?.data?.ucpId
+  //     if( ucpId == null) throw Error('missing ucpId')
+  //     console.log('ucpId', ucpId)
+  //     return ucpId
+  //   })
+  // }
+
+  // getResponse = Trottle(async (request, operation: string, getReturnData: (response) => any ) => {
+  //   this.startLoading()
+  //   this.addMessage(operation + ' ...')
+  //   let returnData = null
+  //   try {
+  //     const results = await this.getResponses(request)
+  //     // look for error
+  //     const responseException = results.find( (r: any) => r?.header?.messageType == 'ResponseException' )
+
+  //     if( responseException != null ){
+  //       throw Error(responseException?.data)
+  //     }
+  //     // look for response
+  //     const response = results.find( (r: any) => {
+  //       const messageType = r?.header?.messageType
+  //       return ['FisResponse','Response'].indexOf(messageType) > -1
+  //     })
+  //     if(response == null){
+  //       throw Error('fail to get success response')
+  //     }
+
+  //     // try extract data
+  //     returnData = getReturnData(response)
+
+  //     this.addMessage(operation + ' success.')
+  //   } catch (error) {
+  //     this.addMessage(operation + ' fail :' + error)
+  //   }
+  //   this.endLoading()
+
+  //   console.log('results', returnData)
+  //   return returnData;
+  // })
+
+
+  loginUsingIdToken(){
+    this.$emit('loginAction',{
+      request: getLoginMessageByGoogleIdToken(this.idToken, 10000),
+      title: 'signin GoogleIdToken',
+      handle: (response) => {
+        const ucpId = response?.data?.ucpId
+        if( ucpId == null ) throw Error('missing ucpId')
+        return ucpId
+      }
+    })
+    
+    
+  }
+}
+</script>
+
+<style>
+</style>

+ 13 - 2
src/components/UIClient.vue

@@ -15,6 +15,9 @@
     </div>
 
   <div class="cards">
+    <google-login class="card" :connection="connection" @loginAction="loginAction">
+
+    </google-login>
     <div class="card">
       <h3>Websocket</h3>
       <div v-if="connection.socketId" >
@@ -144,7 +147,7 @@ import {
 } from '../assets/js/__message-util';
 import { TestSocketIoClient } from "../assets/js/__transport.socketio"
 import { Component, Prop, Vue } from 'vue-property-decorator'
-
+import GoogleLogin from './GoogleLogin.vue'
 
 type Session = {
   ucpId: string,
@@ -168,7 +171,11 @@ type Subscription = {
   subId: string,
   messages: Message[],
 }
-@Component
+@Component({
+  components: {
+    GoogleLogin
+  }
+})
 export default class UiClient extends Vue {
   @Prop() private msg!: string;
   
@@ -240,6 +247,10 @@ export default class UiClient extends Vue {
     this.endLoading()
   }
 
+  async loginAction(data) {
+    this.session.ucpId = await this.getResponse( data.request, data.title, data.handle)
+  }
+
   getResponse = Trottle(async (request, operation: string, getReturnData: (response) => any ) => {
     this.startLoading()
     this.addMessage(operation + ' ...')