Apple Sign Up/Log In

Users can log in/register the system through their Apple account

API Usage Instructions

Before calling the API, please ensure you have thoroughly read the relevant API documentation. Below are specific instructions for different login methods:

For more detailed steps, please refer to the Apple developer documentation: Apple Developer Documentation

Before using the third-party login service, you need to register as a developer on the respective platform and create an application. The registration steps for Apple are as follows:

Register for an Apple Developer Account: You need a valid Apple Developer account, which can be registered through the Apple Developer site.
Create an App ID: Create a new App ID in the Apple Developer portal and enable the "Sign in with Apple" feature.
Configure Services: In the "Certificates, Identifiers & Profiles" section, configure the necessary certificates and provisioning profiles for your application.
Generate Client Key: Obtain the Client ID (Client ID) and Client Secret (Client Secret).
Configure the Client ID and Client Secret in the White Label Management Backend.

Call the third-party configuration API to obtain the Client ID registered in the first step.

Request Parameters:

{
    // Third-party source: Supported third-party login sources
    // Optional values include: google, facebook, twitter, telegram, apple, metamask, separated by commas
    "thirdSource": "google,apple"  // Example: using Google and Apple login
}

Response Structure:

{
    // Third-party source: Supported third-party login sources, e.g., "google", "facebook", "twitter", "telegram", "apple", "metamask"
    "thirdSource": "apple",  // Example: using Apple login

    // Client ID: The unique identifier for the third-party application
    "clientId": "abcesddff",    // Example: your application's client ID on Apple

    // Developer Account: The developer's email associated with the third-party source
    "developerAccount": "[email protected]" // Example: developer's email address
}

Refer to the documentation: Configuring Your Webpage for Sign in with Apple

1. Include the Apple JS SDK:

Include the Apple JavaScript SDK in your HTML page as follows:

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

2. Initialize the Apple JS SDK:

AppleID.auth.init({
    clientId: 'YOUR_CLIENT_ID', // The client ID obtained in the previous step
    scope: 'email',              // Requested permissions, e.g., user email
    redirectURI: 'YOUR_REDIRECT_URI', // URI to redirect after successful login, typically the current page URL
    state: 'YOUR_STATE',         // Random string used to prevent CSRF attacks
    usePopup: true               // Optional: set to true to use a popup window for login
});

function loginWithApple() {
    window.AppleID.auth.signIn();
}

// Listen for successful Apple ID authorization
document.addEventListener('AppleIDSignInOnSuccess', (event) => {
    // Handle the successful response
    appleVerify({
        idToken: event.detail.authorization.id_token, // Get the user's ID Token
        code: event.detail.authorization.code, // Get the authorization code
        email: event.detail.user.email // Get the user's email
    });
});

5. Apple Access Token Verification:

Call the Apple third-party login verification API.

Request Parameters:

{
    // Authorization code required for web login validation
    "code": "exampleAuthCode",  

    // Email, optional for app side
    "email": "[email protected]",  

    // Identity Token, required for app side
    "identityToken": "exampleIdentityToken",  

    // ID Token, required for web side
    "idToken": "exampleIdToken",  

    // Third-party Open ID, required for app side
    "openId": "exampleOpenId"  
}

Response Structure:

{
    // Next operation action: Supported operation types, such as "login", "bind", "register"
    "action": "login",  // Example: indicates the user is performing a login operation

    // User's email returned by the third party
    "email": "[email protected]",  

    // Reason for verification failure (if any)
    "failReason": "Invalid credentials", 

    // User's phone number returned by the third party
    "phone": "+1234567890", 

    // Verification result: indicates whether verification was successful, true for success, false for failure
    "result": true,  // Example: indicates verification success

    // Third-party login source: Supported sources, e.g., "google", "facebook", "twitter"
    "thirdSource": "apple",  

    // Verification token: token for identity verification
    "token": "exampleToken123",

    // Third-party user ID: unique identifier for the user on the third-party platform
    "userId": "thirdPartyUserId",

    // Third-party authorization credential: credential for accessing third-party APIs
    "authToken": "authToken123" 
}

Based on the information returned in the previous step, call the third-party login or registration API.

const appleVerify = (data: UserService.LoginVerifyRes) => {
    // Retrieve action type, failure reason, and third-party source
    let { action, failReason, thirdSource } = data;

    // Handle different processes based on action type
    if (action === 'register') {
        // Registration operation
        register(data);
    } else if (action === 'login') {
        // Login operation
        login(data); 
    } else if (action === 'bind') {
        // Binding operation
        login(data);
    } else {
        // Operation is not as expected, show failure reason
        Toast.error(failReason);
    }
};

Through the above steps, you can successfully integrate Apple login functionality and obtain the user's authorized Access Token. If you encounter issues during integration, please check the network connection or the configuration of your Apple application to ensure all steps are correctly followed. For more information, please refer to the Apple developer documentation.

PreviousTwitter Sign Up/Log In NextTelegram Sign Up/Log In

Last updated 1 year ago

API Usage Instructions

一、Setting Up Apple Login Configuration

二、Retrieve Third-Party Login Configuration Information

三、Login Code Implementation

1. Include the Apple JS SDK:

2. Initialize the Apple JS SDK:

3. Initiate Login Authorization Request:

4. Listen for Login Authorization Success:

5. Apple Access Token Verification:

6. Complete Login/Register