Home Explore
Sign In
tbtchan
/
fis-client-demo
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

add google login

thomas 3 years ago
parent
53145ac01d
commit
1d2d6e8292
5 changed files with 193 additions and 2 deletions
Unified View Show Diff Stats
  1. 44 0
      public/accessdata.html
  2. 24 0
      public/index.html
  3. 15 0
      src/assets/js/__message-util.ts
  4. 97 0
      src/components/GoogleLogin.vue
  5. 13 2
      src/components/UIClient.vue

+ 44 - 0
public/accessdata.html
View File 

@@ -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
View File 

@@ -4,13 +4,37 @@
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <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">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <title><%= htmlWebpackPlugin.options.title %></title>
 
     <title><%= htmlWebpackPlugin.options.title %></title>
 
+    <script src="https://apis.google.com/js/platform.js" async defer></script>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <noscript>
 
     <noscript>
 
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
     </noscript>
 
     </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>
 
     <div id="app"></div>
 
     <!-- built files will be auto injected -->
 
     <!-- built files will be auto injected -->
 
   </body>
 
   </body>

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

@@ -36,6 +36,21 @@ export function getMessage(param: any, ucpId: string | null = null): FisAppReque
 
   } as CommandMessageParameter) as FisAppRequestMessage;  
   } 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){
 
 export function getLoginMessage(timeout: number|null = null){
 
   const basic: any = {
 
   const basic: any = {
 
     messageType: AppMessageType.Command, 
     messageType: AppMessageType.Command,

+ 97 - 0
src/components/GoogleLogin.vue
View File 

@@ -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
View File 

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