From 68fcf8b804cb6939c43fab54346e6c20e4dabfcd Mon Sep 17 00:00:00 2001 From: reslear Date: Tue, 17 Aug 2021 13:32:30 +0300 Subject: [PATCH 1/6] refactor: `init` only for web, without check platform (#134) * refactor: add ios `init` unimplemented * refactor: add android `init` unimplemented --- .../com/codetrixstudio/capacitor/GoogleAuth/GoogleAuth.java | 5 +++++ ios/Plugin/Plugin.m | 1 + ios/Plugin/Plugin.swift | 5 +++++ 3 files changed, 11 insertions(+) diff --git a/android/src/main/java/com/codetrixstudio/capacitor/GoogleAuth/GoogleAuth.java b/android/src/main/java/com/codetrixstudio/capacitor/GoogleAuth/GoogleAuth.java index cd327af..597783d 100644 --- a/android/src/main/java/com/codetrixstudio/capacitor/GoogleAuth/GoogleAuth.java +++ b/android/src/main/java/com/codetrixstudio/capacitor/GoogleAuth/GoogleAuth.java @@ -59,6 +59,11 @@ public void load() { googleSignInClient = GoogleSignIn.getClient(this.getContext(), googleSignInOptions); } + @PluginMethod + public void init(PluginCall call) { + call.unimplemented(); + } + @PluginMethod() public void signIn(PluginCall call) { saveCall(call); diff --git a/ios/Plugin/Plugin.m b/ios/Plugin/Plugin.m index 91e2034..0e689da 100644 --- a/ios/Plugin/Plugin.m +++ b/ios/Plugin/Plugin.m @@ -7,4 +7,5 @@ CAP_PLUGIN_METHOD(signIn, CAPPluginReturnPromise); CAP_PLUGIN_METHOD(refresh, CAPPluginReturnPromise); CAP_PLUGIN_METHOD(signOut, CAPPluginReturnPromise); + CAP_PLUGIN_METHOD(init, CAPPluginReturnPromise); ) diff --git a/ios/Plugin/Plugin.swift b/ios/Plugin/Plugin.swift index 230fa66..000119b 100644 --- a/ios/Plugin/Plugin.swift +++ b/ios/Plugin/Plugin.swift @@ -34,6 +34,11 @@ public class GoogleAuth: CAPPlugin { NotificationCenter.default.addObserver(self, selector: #selector(handleOpenUrl(_ :)), name: Notification.Name(CAPNotifications.URLOpen.name()), object: nil); } + @objc + func init(_ call: CAPPluginCall) { + call.unimplemented("Not available on iOS") + } + @objc func signIn(_ call: CAPPluginCall) { signInCall = call; From 39be4c558fa6f8c24b1581d893cc7de2e5b58aca Mon Sep 17 00:00:00 2001 From: reslear Date: Tue, 17 Aug 2021 13:39:06 +0300 Subject: [PATCH 2/6] docs: correct angular example (#111) * Update README.md * docs: add angular `init` hook instruction --- README.md | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 388cab8..59139bb 100644 --- a/README.md +++ b/README.md @@ -42,18 +42,36 @@ Register plugin and manually initialize ```ts import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'; +// use hook after platform dom ready GoogleAuth.init() ``` + Use it ```ts GoogleAuth.signIn() ``` #### AngularFire2 + +init hook +```ts +// app.component.ts +constructor() { + this.initializeApp(); +} + +initializeApp() { + this.platform.ready().then(() => { + GoogleAuth.init() + }) +} +``` + +sign in function ```ts async googleSignIn() { - let googleUser = await Plugins.GoogleAuth.signIn(); + let googleUser = await GoogleAuth.signIn(); const credential = auth.GoogleAuthProvider.credential(googleUser.authentication.idToken); return this.afAuth.auth.signInAndRetrieveDataWithCredential(credential); } @@ -126,7 +144,7 @@ Provide configuration in root `capacitor.config.json` Note : `forceCodeForRefreshToken` force user to select email address to regenerate AuthCode used to get a valid refreshtoken (work on iOS and Android) (This is used for offline access and serverside handling) -### Migration guide +## Migration guide #### Migrate from 2 to 3 @@ -136,7 +154,7 @@ After [migrate to Capcitor 3](https://capacitorjs.com/docs/updating/3-0) updatin ```diff - import "@codetrix-studio/capacitor-google-auth"; - import { Plugins } from '@capacitor/core'; -+ import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'; ++ import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth' - Plugins.GoogleAuth.signIn(); + GoogleAuth.init() From 6a7dba58e6a98d9b2b13aa19ff78e11e3b062070 Mon Sep 17 00:00:00 2001 From: reslear Date: Sat, 21 Aug 2021 18:49:53 +0300 Subject: [PATCH 3/6] feat: add prettier with ionic config (#137) * feat: init prettier * style: format files --- README.md | 65 +++++++++++++++++++++++++++++----------------- package-lock.json | 40 ++++++++++++++++++++++++++-- package.json | 5 +++- rollup.config.js | 8 +++--- src/definitions.ts | 2 +- src/index.ts | 2 +- src/user.ts | 24 ++++++++--------- src/web.ts | 44 ++++++++++++++----------------- tsconfig.json | 9 ++----- 9 files changed, 122 insertions(+), 77 deletions(-) diff --git a/README.md b/README.md index 59139bb..1387009 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ # CapacitorGoogleAuth + Capacitor plugin for Google Auth. ## Contributions + PRs are welcome and much appreciated that keeps this plugin up to date with Capacitor and official Google Auth platform library feature parity. Try to follow good code practices. You can even help keeping the included demo updated. @@ -10,11 +12,10 @@ PRs for features that are not aligned with the official Google Auth library are (We are beginner-friendly here) - - ## Install #### 1. Install package + ```bash npm i --save @codetrix-studio/capacitor-google-auth @@ -23,40 +24,48 @@ npm i --save @codetrix-studio/capacitor-google-auth@2.1.3 ``` #### 2. Update capacitor deps + ```sh npx cap update ``` + #### 3. Migrate from 2 to 3 version + if your migrate from Capacitor 2 to Capacitor 3 [see instruction for migrate plugin to new version](#migrate-from-2-to-3) ## Usage + for capacitor 2.x.x use [instruction](https://github.com/CodetrixStudio/CapacitorGoogleAuth/blob/79129ab37288f5f5d0bb9a568a95890e852cebc2/README.md) ### WEB + Add [`clientId`](https://developers.google.com/identity/sign-in/web/sign-in#specify_your_apps_client_id) meta tag to head. + ```html - + ``` Register plugin and manually initialize + ```ts import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'; // use hook after platform dom ready -GoogleAuth.init() +GoogleAuth.init(); ``` - Use it + ```ts -GoogleAuth.signIn() +GoogleAuth.signIn(); ``` #### AngularFire2 init hook + ```ts -// app.component.ts +// app.component.ts constructor() { this.initializeApp(); } @@ -68,7 +77,8 @@ initializeApp() { } ``` -sign in function +sign in function + ```ts async googleSignIn() { let googleUser = await GoogleAuth.signIn(); @@ -78,36 +88,40 @@ async googleSignIn() { ``` #### Vue 3 + ```ts // App.vue -import { defineComponent, onMounted } from 'vue' -import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth' +import { defineComponent, onMounted } from 'vue'; +import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'; export default defineComponent({ setup() { onMounted(() => { - GoogleAuth.init() - }) - + GoogleAuth.init(); + }); + const logIn = async () => { - const response = await GoogleAuth.signIn() - console.log(response) - } - + const response = await GoogleAuth.signIn(); + console.log(response); + }; + return { - logIn - } - } -}) + logIn, + }; + }, +}); ``` ### iOS + Make sure you have `GoogleService-Info.plist` with `CLIENT_ID` Add `REVERSED_CLIENT_ID` as url scheme to `Info.plist` ### Android + Inside your `strings.xml` + ```xml Your Web Client Key @@ -115,11 +129,13 @@ Inside your `strings.xml` ``` Import package inside your `MainActivity` + ```java import com.codetrixstudio.capacitor.GoogleAuth.GoogleAuth; ``` Register plugin inside your `MainActivity.onCreate` + ```java this.init(savedInstanceState, new ArrayList>() {{ add(GoogleAuth.class); @@ -127,23 +143,23 @@ this.init(savedInstanceState, new ArrayList>() {{ ``` ## Configure + Provide configuration in root `capacitor.config.json` + ```json { "plugins": { "GoogleAuth": { "scopes": ["profile", "email"], "serverClientId": "xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com", - "forceCodeForRefreshToken" : true + "forceCodeForRefreshToken": true } } } - ``` Note : `forceCodeForRefreshToken` force user to select email address to regenerate AuthCode used to get a valid refreshtoken (work on iOS and Android) (This is used for offline access and serverside handling) - ## Migration guide #### Migrate from 2 to 3 @@ -151,6 +167,7 @@ Note : `forceCodeForRefreshToken` force user to select email address to regenera After [migrate to Capcitor 3](https://capacitorjs.com/docs/updating/3-0) updating you projects, see diff: ##### WEB + ```diff - import "@codetrix-studio/capacitor-google-auth"; - import { Plugins } from '@capacitor/core'; diff --git a/package-lock.json b/package-lock.json index 0dda198..e409507 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,19 +1,21 @@ { "name": "@codetrix-studio/capacitor-google-auth", - "version": "3.0.1", + "version": "3.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@codetrix-studio/capacitor-google-auth", - "version": "3.0.1", + "version": "3.0.2", "license": "MIT", "devDependencies": { "@capacitor/android": "^3.0.1", "@capacitor/core": "^3.0.1", "@capacitor/ios": "^3.0.1", + "@ionic/prettier-config": "^2.0.0", "@types/gapi": "0.0.39", "@types/gapi.auth2": "0.0.54", + "prettier": "^2.3.2", "typescript": "^4.3.2" }, "peerDependencies": { @@ -47,6 +49,15 @@ "@capacitor/core": "~3.0.0" } }, + "node_modules/@ionic/prettier-config": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-2.0.0.tgz", + "integrity": "sha512-ageMx54B9qqS1scnFW3kQW2NW8HyXwUM/p9c1YSWFKr6Yct7YVNbJFY3EcFapaNTiDnwo+GLlPRt+wST6E8AfA==", + "dev": true, + "peerDependencies": { + "prettier": "^2.0.0" + } + }, "node_modules/@types/gapi": { "version": "0.0.39", "resolved": "https://registry.npmjs.org/@types/gapi/-/gapi-0.0.39.tgz", @@ -62,6 +73,18 @@ "@types/gapi": "*" } }, + "node_modules/prettier": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz", + "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/tslib": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", @@ -106,6 +129,13 @@ "dev": true, "requires": {} }, + "@ionic/prettier-config": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-2.0.0.tgz", + "integrity": "sha512-ageMx54B9qqS1scnFW3kQW2NW8HyXwUM/p9c1YSWFKr6Yct7YVNbJFY3EcFapaNTiDnwo+GLlPRt+wST6E8AfA==", + "dev": true, + "requires": {} + }, "@types/gapi": { "version": "0.0.39", "resolved": "https://registry.npmjs.org/@types/gapi/-/gapi-0.0.39.tgz", @@ -121,6 +151,12 @@ "@types/gapi": "*" } }, + "prettier": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz", + "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==", + "dev": true + }, "tslib": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", diff --git a/package.json b/package.json index 65f0a54..bcc60fc 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,10 @@ "@capacitor/core": "^3.0.1", "@capacitor/android": "^3.0.1", "@capacitor/ios": "^3.0.1", + "@ionic/prettier-config": "^2.0.0", "@types/gapi": "0.0.39", "@types/gapi.auth2": "0.0.54", + "prettier": "^2.3.2", "typescript": "^4.3.2" }, "peerDependencies": { @@ -56,5 +58,6 @@ }, "bugs": { "url": "https://github.com/CodetrixStudio/CapacitorGoogleAuth.git/issues" - } + }, + "prettier": "@ionic/prettier-config" } diff --git a/rollup.config.js b/rollup.config.js index 906e8a1..4c59bf9 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -6,9 +6,7 @@ export default { file: 'dist/plugin.js', format: 'iife', name: 'capacitorPlugin', - sourcemap: true + sourcemap: true, }, - plugins: [ - nodeResolve() - ] -}; \ No newline at end of file + plugins: [nodeResolve()], +}; diff --git a/src/definitions.ts b/src/definitions.ts index 7ae62fb..379a618 100644 --- a/src/definitions.ts +++ b/src/definitions.ts @@ -1,4 +1,4 @@ -import { Authentication, User } from "./user"; +import { Authentication, User } from './user'; export interface GoogleAuthPlugin { signIn(): Promise; diff --git a/src/index.ts b/src/index.ts index cd3ad3a..1147b01 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,7 +2,7 @@ import { registerPlugin } from '@capacitor/core'; import type { GoogleAuthPlugin } from './definitions'; const GoogleAuth = registerPlugin('GoogleAuth', { - web: () => import('./web').then(m => new m.GoogleAuthWeb()), + web: () => import('./web').then((m) => new m.GoogleAuthWeb()), }); export * from './definitions'; diff --git a/src/user.ts b/src/user.ts index fedb184..b6d8ed9 100644 --- a/src/user.ts +++ b/src/user.ts @@ -1,17 +1,17 @@ export interface User { - id: string; - email: string; - - name: string; - familyName: string; - givenName: string; - imageUrl: string; + id: string; + email: string; - serverAuthCode: string; - authentication: Authentication; + name: string; + familyName: string; + givenName: string; + imageUrl: string; + + serverAuthCode: string; + authentication: Authentication; } export interface Authentication { - accessToken: string; - idToken: string; -} \ No newline at end of file + accessToken: string; + idToken: string; +} diff --git a/src/web.ts b/src/web.ts index b06f7c1..30371d4 100644 --- a/src/web.ts +++ b/src/web.ts @@ -6,7 +6,6 @@ import { User, Authentication } from './user'; import config from '../../../../../capacitor.config.json'; export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { - gapiLoaded: Promise; get webConfigured(): boolean { @@ -22,30 +21,29 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { } loadScript() { - const scriptId = 'gapi' - const scriptEl = document?.getElementById(scriptId) - + const scriptId = 'gapi'; + const scriptEl = document?.getElementById(scriptId); + if (scriptEl) { - return + return; } - var head = document.getElementsByTagName('head')[0] - var script = document.createElement('script') - + var head = document.getElementsByTagName('head')[0]; + var script = document.createElement('script'); + script.type = 'text/javascript'; script.defer = true; script.async = true; - script.id = scriptId + script.id = scriptId; script.onload = this.platformJsLoaded; script.src = 'https://apis.google.com/js/platform.js'; head.appendChild(script); } - init(){ - if (!this.webConfigured) - return; + init() { + if (!this.webConfigured) return; - this.gapiLoaded = new Promise(resolve => { + this.gapiLoaded = new Promise((resolve) => { // HACK: Relying on window object, can't get property in gapi.load callback (window as any).gapiResolve = resolve; this.loadScript(); @@ -57,7 +55,7 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { platformJsLoaded() { gapi.load('auth2', () => { const clientConfig: gapi.auth2.ClientConfig = { - client_id: (document.getElementsByName('google-signin-client_id')[0] as any).content + client_id: (document.getElementsByName('google-signin-client_id')[0] as any).content, }; if (config.plugins.GoogleAuth != null && config.plugins.GoogleAuth.scopes != null) { @@ -77,9 +75,7 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { try { needsOfflineAccess = config.plugins.GoogleAuth.serverClientId != null; - } catch { - - } + } catch {} if (needsOfflineAccess) { const offlineAccessResponse = await gapi.auth2.getAuthInstance().grantOfflineAccess(); @@ -105,11 +101,11 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { } async refresh(): Promise { - const authResponse = await gapi.auth2.getAuthInstance().currentUser.get().reloadAuthResponse() + const authResponse = await gapi.auth2.getAuthInstance().currentUser.get().reloadAuthResponse(); return { accessToken: authResponse.access_token, - idToken: authResponse.id_token - } + idToken: authResponse.id_token, + }; } async signOut(): Promise { @@ -118,8 +114,8 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { private async addUserChangeListener() { await this.gapiLoaded; - gapi.auth2.getAuthInstance().currentUser.listen(googleUser => { - this.notifyListeners("userChange", googleUser.isSignedIn() ? this.getUserFrom(googleUser) : null); + gapi.auth2.getAuthInstance().currentUser.listen((googleUser) => { + this.notifyListeners('userChange', googleUser.isSignedIn() ? this.getUserFrom(googleUser) : null); }); } @@ -137,8 +133,8 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { const authResponse = googleUser.getAuthResponse(true); user.authentication = { accessToken: authResponse.access_token, - idToken: authResponse.id_token - } + idToken: authResponse.id_token, + }; return user; } diff --git a/tsconfig.json b/tsconfig.json index 5e84163..67fa7dd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,10 +3,7 @@ "allowSyntheticDefaultImports": true, "declaration": true, "experimentalDecorators": true, - "lib": [ - "dom", - "es2017" - ], + "lib": ["dom", "es2017"], "module": "ESNext", "moduleResolution": "node", "noImplicitAny": true, @@ -16,7 +13,5 @@ "sourceMap": true, "target": "es2017" }, - "files": [ - "src/index.ts" - ] + "files": ["src/index.ts"] } From b0cb94b9058208fe7122688112578ee52646fe49 Mon Sep 17 00:00:00 2001 From: reslear Date: Sat, 21 Aug 2021 19:16:17 +0300 Subject: [PATCH 4/6] refactor: bump deps (#138) --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index bcc60fc..750b41d 100644 --- a/package.json +++ b/package.json @@ -14,14 +14,14 @@ "author": "CodetrixStudio", "license": "MIT", "devDependencies": { - "@capacitor/core": "^3.0.1", - "@capacitor/android": "^3.0.1", - "@capacitor/ios": "^3.0.1", + "@capacitor/core": "^3.2.0", + "@capacitor/android": "^3.2.0", + "@capacitor/ios": "^3.2.0", "@ionic/prettier-config": "^2.0.0", - "@types/gapi": "0.0.39", - "@types/gapi.auth2": "0.0.54", + "@types/gapi": "0.0.41", + "@types/gapi.auth2": "0.0.55", "prettier": "^2.3.2", - "typescript": "^4.3.2" + "typescript": "^4.3.5" }, "peerDependencies": { "@capacitor/core": "^3" From 44d766b043ad6270f59007207d81e8e24795ca6a Mon Sep 17 00:00:00 2001 From: reslear Date: Mon, 23 Aug 2021 19:24:17 +0300 Subject: [PATCH 5/6] docs: add vue example repo link --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 1387009..f9fc1fd 100644 --- a/README.md +++ b/README.md @@ -111,6 +111,7 @@ export default defineComponent({ }, }); ``` +or see more [CapacitorGoogleAuth-Vue3-example](https://github.com/reslear/CapacitorGoogleAuth-Vue3-example) ### iOS From f24cacc94cf173915cd5ee4028e5ad998f55721d Mon Sep 17 00:00:00 2001 From: reslear Date: Fri, 27 Aug 2021 15:47:45 +0300 Subject: [PATCH 6/6] Update Plugin.swift --- ios/Plugin/Plugin.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ios/Plugin/Plugin.swift b/ios/Plugin/Plugin.swift index 664df71..63d0599 100644 --- a/ios/Plugin/Plugin.swift +++ b/ios/Plugin/Plugin.swift @@ -37,7 +37,7 @@ public class GoogleAuth: CAPPlugin { } @objc - func init(_ call: CAPPluginCall) { + func `init`(_ call: CAPPluginCall) { call.unimplemented("Not available on iOS") }