Nosey Party Murderer

    vue-apple-login

    2.0.1 • Public • Published

    vue-apple-login

    A simple Vue plugin to include an Apple sign-in button into your web app.

    normal apple button black tiny apple button black normal apple button white

    Install

    For Vue.js 3:

    npm install vue-apple-login@2.x
    

    For Vue.js 2:

    npm install vue-apple-login@1.x
    

    Usage

    index.html

    <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

    main.js

    import VueAppleLogin from 'vue-apple-login';
    
    const createdApp = createApp(App);
    
    createdApp.use(VueAppleLogin, {
      clientId: 'com.example.signin',
      scope: 'name email',
      redirectURI: 'https://example.com',
      state: time.toString(),
      usePopup: true,
    });
    
    createdApp.mount('#app');

    Now you have a vue-apple-login global component, ready for use.

    Example

    Simple

    <vue-apple-login></vue-apple-login>

    Advanced

    <vue-apple-login
      mode="center-align"
      type="sign in"
      color="black"
      :border="true"
      :radius="15"
      width="100%"
      height="100%"
      logoSize="medium"
      :logoPosition="0"
      :labelPosition="0"
      className="vue-apple-login"
      :onSuccess="callSuccess"
      :onFailure="callFail"
    ></vue-apple-login>

    For more information on styling visit: Apple documentation

    :onSuccess can be used as callback function to retrieve Apple user data and code to run a validation check with the server. :onFailure will be called when authentication failed. Make sure usePopup is set to true for callback to work.

    On a succesfull login you will get the following data

    {
      "authorization": {
        "code": "[code to verify user with apple server]",
        "id_token": "[json base64 encode user data]",
        "state": "[random unique number]"
      },
      "userData": {
          "aud": "com.example.signin", 
          "auth_time": 1615125205, 
          "c_hash": "",
          "exp": 1615211605,
          "iat": 1615125205,
          "iss": "https://appleid.apple.com",
          "nonce_supported": true,
          "sub": "[Unique user ID]"
      }
    }

    Full example

    AppleLogin.vue

    <template>
      <div>
        <vue-apple-login v-if="!signedIn"
            color="black"
            :border="true"
            type="sign in"
            width="200"
            height="36"
            :onSuccess="onSuccess"
            :onFailure="onFailure"
        ></vue-apple-login>
        <button v-if="signedIn" v-on:click="onSuccessLogout()" class="login-button">
          Sign out with Apple
        </button>
      </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    signedIn: false,
                }
            },
            methods: {
                onSuccess(data) {
                    console.log(data);
                    this.signedIn = true;
                },
                onSuccessLogout(){
                    this.signedIn = false;
                },
                onFailure(error) {
                    console.log(error);
                },
            }
        }
    </script>
    
    <style scoped>
        button.login-button {
          background-color: white;
          height: 32px;
          width: 200px;
          border-radius: 5px;
          border: 0px;
          font-size: 12px;
          font-weight: 500;
          margin: 5px;
        }
        button.login-button svg{
          height: 15px;
          margin-top: -3px;
          margin-right: 3px;
        }
    </style>

    Install

    npm i vue-apple-login

    DownloadsWeekly Downloads

    212

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    23.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • redsd