diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..db87e1f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +charset = utf-8 +trim_trailing_whitespace = false +insert_final_newline = false \ No newline at end of file diff --git a/.github/workflows/test-build.yml b/.github/workflows/test-build.yml new file mode 100644 index 0000000..cee13a8 --- /dev/null +++ b/.github/workflows/test-build.yml @@ -0,0 +1,28 @@ +name: Test and Build Plugin + +on: + push: + branches: [master, develop] + pull_request: + branches: [master] + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + + - name: Install yarn + uses: actions/setup-node@v1 + with: + node-version: "14" + + - name: Install deps + run: yarn install + + # - name: Run tests + # run: yarn test + + - name: Run build + run: yarn build diff --git a/README.md b/README.md index c397d00..954b7b1 100755 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ # Capacitor Sign in With Apple + [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-) + Capacitor plugin to support [Sign in With Apple](https://developer.apple.com/sign-in-with-apple/get-started/) @@ -16,39 +18,88 @@ Capacitor plugin to support [Sign in With Apple](https://developer.apple.com/sig ## Maintainers -| Maintainer | GitHub | Social | Sponsoring Company | -| -----------| -------| -------| -------------------| -| Max Lynch | [mlynch](https://github.com/mlynch) | [@maxlynch](https://twitter.com/maxlynch) | Ionic | +| Maintainer | GitHub | Social | Sponsoring Company | +| ---------- | ----------------------------------- | ----------------------------------------- | ------------------ | +| Max Lynch | [mlynch](https://github.com/mlynch) | [@maxlynch](https://twitter.com/maxlynch) | Ionic | Maintenance Status: Partially Maintained (help wanted) ## Installation -- `npm i @capacitor-community/apple-sign-in` +To use npm + +```bash +npm install @capacitor-community/apple-sign-in +``` + +To use yarn + +```bash +yarn add @capacitor-community/apple-sign-in +``` + +Sync native files + +```bash +npx cap sync +``` ## Usage (iOS) ```ts -import { Plugins } from '@capacitor/core' +import { Plugins } from "@capacitor/core"; -const { SignInWithApple } = Plugins +const { SignInWithApple } = Plugins; try { - const response = await SignInWithApple.Authorize() + const response = await SignInWithApple.Authorize(); } catch (e) { + console.error(e); } ``` -## Instructions (Android/Web) - -The plugin currently works for iOS only. It's made only to pass Apple's new terms. Add the Apple button only after you've checked that the user is on iOS device. Web support is planned for Apple's JS support ([help wanted!](https://github.com/capacitor-community/apple-sign-in/issues/1)). +## Instructions (Web) ```ts -const { Device } = Plugins +const { Device } = Plugins; + +let device = await Device.getInfo(); + +if (device.platform === "web") { + // Configure and initialize the plugin with correct values + SignInWithApple.Init({ + clientId: "[CLIENT_ID]", + scope: "[SCOPES]", // scope=name email + redirectURI: "[REDIRECT_URI]", + state: "[STATE]", + usePopup: true, //or false defaults to false + }); + + // Trigger Sign in manually with an action, e.g. custom button + SignInWithApple.SignIn(); + + // or + + // Use default apple button style by adding div +
; +} +``` -let device = await Device.getInfo() +Authorization callback listeners can be configured by adding **AppleIDSignInOnSuccess** and **AppleIDSignInOnFailure** -if (device.platform === 'ios') { - // Show the button with SignInWithApple.Authorize() -} +```ts +//Listen for authorization success +document.addEventListener("AppleIDSignInOnSuccess", (data) => { + console.log(data); +}); + +//Listen for authorization failures +document.addEventListener("AppleIDSignInOnFailure", (error) => { + console.error(error); +}); ``` diff --git a/src/definitions.ts b/src/definitions.ts index 0a8fd2f..b86ae2c 100755 --- a/src/definitions.ts +++ b/src/definitions.ts @@ -5,5 +5,17 @@ declare module "@capacitor/core" { } export interface SignInWithApplePlugin { - Authorize(): Promise<{response: any}>; + Init(options: InitOptions): Promise; + + Authorize(): Promise<{ response: any }>; + + SignIn(): Promise; +} + +export interface InitOptions { + clientId: string; + scope: string; + redirectURI: string; + state: string; + usePopup: boolean; } diff --git a/src/web.ts b/src/web.ts index 27e6142..f258717 100755 --- a/src/web.ts +++ b/src/web.ts @@ -1,22 +1,61 @@ -import { WebPlugin } from '@capacitor/core'; -import { SignInWithApplePlugin } from './definitions'; +import { WebPlugin } from "@capacitor/core"; -export class SignInWithAppleWeb extends WebPlugin implements SignInWithApplePlugin { +import { SignInWithApplePlugin, InitOptions } from "./definitions"; + +declare var window: any; + +export class SignInWithAppleWeb extends WebPlugin + implements SignInWithApplePlugin { constructor() { super({ - name: 'SignInWithApple', - platforms: ['web'] + name: "SignInWithApple", + platforms: ["web"], }); } - async Authorize(): Promise<{response: any}> { + async SignIn(): Promise { + if (window && window.AppleID) { + return await window.AppleID.auth.signIn(); + } + return; } + + async Init(options: InitOptions): Promise { + this.loadAppleScript(() => { + if (window && window.AppleID) { + const { clientId, scope, redirectURI, state, usePopup } = options; + + window.AppleID.auth.init({ + clientId: clientId, + scope: scope, + redirectURI: redirectURI, + state: state, + usePopup: usePopup !== undefined ? usePopup : false, + }); + } + }); + } + + async Authorize(): Promise<{ response: any }> { + return await window.AppleID.auth.signIn(); + } + + private loadAppleScript(callback: any) { + const file = document.createElement("script"); + file.setAttribute("type", "text/javascript"); + file.setAttribute( + "src", + "https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js" + ); + file.addEventListener("load", callback); + document.getElementsByTagName("head")[0].appendChild(file); + } } const SignInWithApple = new SignInWithAppleWeb(); export { SignInWithApple }; -import { registerWebPlugin } from '@capacitor/core'; +import { registerWebPlugin } from "@capacitor/core"; registerWebPlugin(SignInWithApple);