Log In With Apple using redirect pop-up

Leave a reply

This tutorial demonstrates how to use oAuth to sign-in with Apple without using any library.We simply use HTTP GET request to their endpoint URL: appleid.apple.com/auth/authorize.

Just to space it up a bit, we are opening Sign-in popup in modal window using window.open but this could be done in the same window. The advantages of open it in modal window are that the user won’t be redirect to different screens and got confused of what’s going on.

Full example here

Main Web app

index.html

<html>
    <head>
      <style>

      </style>

    <script type = "text/javascript">

      var popUpObj;

      function showModalPopUp()    
      {
      popUpObj=window.open(
        "log-in-popup.html",
        "ModalPopUp",
        "toolbar=no," +
        "scrollbars=no," +
        "location=no," +
        "statusbar=no," +
        "menubar=no," +
        "resizable=0," +
        "width=500," +
        "height=640," +
        "left = 480," +
        "top=300"
      );

      popUpObj.focus();
      }   

      function receiveUserSignedInData(parsedToken) {
        console.dir(parsedToken, { depth: null });
      }

    </script>
    </head>
    <body>
    <h1>Welcome to oAuth example</h1>
    <input id="Button1" type="button" value="Log In" onclick="showModalPopUp()">
    </body>
</html>

The main app simply has a button that opens modal window with sign-in button. Line 39.

Log-In popup window

<html>
    <head>
        <style>
            #apple-auth-button {
                webkit-box-align: baseline;
                align-items: baseline;
                border-width: 0px;
                border-radius: 3px;
                box-sizing: border-box;
                display: inline-flex;
                font-size: inherit;
                font-style: normal;
                font-family: inherit;
                max-width: 100%;
                position: relative;
                text-align: center;
                text-decoration: none;
                transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
                white-space: nowrap;
                cursor: pointer;
                padding: 0px 10px;
                vertical-align: middle;
                width: 100%;
                -webkit-box-pack: center;
                justify-content: center;
                font-weight: bold;
                color: var(--ds-text,#42526E) !important;
                height: 40px !important;
                line-height: 40px !important;
                background: rgb(255, 255, 255) !important;
                box-shadow:  rgb(0 0 0 / 20%) 1px 1px 5px 0px !important           
            }
        </style>

    </head>
    <body>
        <a href="https://appleid.apple.com/auth/authorize?client_id=com.sign-in-with-apple-example-redirect-service&redirect_uri=https://www.toni-develops.com/external-files/examples/oauth-with-apple-with-redirect-step-by-step/callback.php&response_type=code id_token&state=123&scope=name email&response_mode=form_post">Sign In with Apple Simple A tag</a>

        <hr/>

        <div id="signInPanel">
            
            <form action="https://appleid.apple.com/auth/authorize?" method="get">
                <input type="hidden" id="client_id" name="client_id" value="com.sign-in-with-apple-example-redirect-service" />
                <input type="hidden" id="redirect_uri" name="redirect_uri" value="https://www.toni-develops.com/external-files/examples/oauth-with-apple-with-redirect-step-by-step/callback.php" />
                <input type="hidden" id="response_type" name="response_type" value="code id_token"/>
                <input type="hidden" id="scope" name="scope" value="name email" />
                <input type="hidden" id="response_mode" name="response_mode" value="form_post" />

                <button id="apple-auth-button" class="css-11s2kpt" type="submit" tabindex="0">
                <span class="css-1ujqpe8">
                    <img class="appleLogo" src="https://www.toni-develops.com/external-files/examples/assets/apple-logo.svg" alt="">
                </span>
                <span class="css-19r5em7"><span>Continue with Apple</span>
                </button> 
            </form>

          </div>        
    </body>
</html>

This window create two sign-in entities: one is simple A tag that demonstrates how we could start sign-in redirect process by simply redirect browser to authentication service, and the second one is a button, that does the same using form submit.

Callback function

callback.php

<html>
    <head>
      <style>

      </style>
      <script type = "text/javascript">
        var id_token = "<?php echo $_POST['id_token'] ?>";


        function parseJwt (token) {
          var base64Url = token.split('.')[1];
          var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
          var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
              return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
          }).join(''));

          return JSON.parse(jsonPayload);
        }           

        function sendDataToMainApp() {
          var parsedToken = parseJwt(id_token);
          window.opener.receiveUserSignedInData(parsedToken);
          window.close();
        }
      </script>
    </head>
    <body onLoad="sendDataToMainApp()">

    
    
    </body>
</html>
what we just did:

Were, we get id_token from Apple authentication service, that passes this via the request type that we selected (post, fragment, get) decodes, id_token then passes it to the parent window and closes itself.

 

Full example here

 

where to go from here ?

Leave a Reply