Link to plugin page: https://zeroqode.com/plugin/sign-in-with-apple-1575475552052x418799001167781100
Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID. Instead of filling out forms, verifying email addresses, and choosing new passwords, they can use Sign in with Apple to set up an account and start using your app right away.
You must have a developer account with Apple to interact with the plugin. Create you development account at: https://developer.apple.com/sign-in-with-apple/get-started/
Key_ID - Can be found in Account -> Certificates.. -> keys -> [your key name] -> Key ID
Team_ID - Can be found in the top right corner, you need the ID from right side without name
Service_ID - Can be found in Account -> Certificates.. -> Identifiers and set filter to Services ID
When you've got your keys from Developer Account, place them in plugin settings fields as shown:
The plugin contains SignInWithApple visual element which should be used on page.
The plugin comes also with Autoremove URL params visual element which can be used on page.
Button recommended style specifications:
Redirect URI - API workflow endpoint url.
Type - text to set up by apple script “Continue with Apple” or “Sing in with Apple”.
Color - button background color, only white or black.
Enable border - show border around button.
Instead of using action, you can place this element on page and it will automatically remove params when user signed in with apple or when user canceled it and was redirected to this page.
Place the plugin element on the page where you want the button to appear, no need to set up workflow for on click or other events, this is will be made by apple script. Check the plugin proprieties you require and set the Redirect URI.
Remove URL params A SignInWithApple - When the user is redirected from backend, the url contains some params and to remove them this action, for example with condition, do when Get user_id from page URL is not empty -> run action
Apple SignIn Authorize User - is used to authorize user , used in API workflow for authorization.
API workflow logic
Create an Endpoint with response type Page redirect (302)
On this first step, you should set it to initialize mode (find in bubble docs more about it), copy and paste the initialize URL in the plugin element Redirect URI field, and now try to sign for the first time.
You should see these fields:
Save it and don’t forget to remove “/initialize” from the redirect URL.
2. Now add the Authorize User action as the first step in the workflow.
Private Key - the key from a file that you downloaded while creating a Key at developer.apple.com.
Response Code - this is in the received data Request Data’s code.
Redirect URI - current endpoint URL should be the same as in plugin element redirect field.
Id Token - this is in the received data Request Data’s id_token.
3. The next steps should be User registration and Login workflows , where the User email from the first step is used and as a password a random string well. It is not recommended to have a
user_id used as a password as we do not have access to it in the frontend during login. SignUp workflow will always be on the backend, but side Login workflow on the front end.
Sign-up: For signup use the workflow to signup the user with obtained email address from user.
If user has an account , use action to login with a temporary password:
On the front end, on the login page, we do the event "do when" with the condition" GET
user_id is not empty and the current user isn't logged ". The first step search the user in BD after Unique Id, unique id has to be equivalent with
user_id from Url and save it in state. In the next step, we create a temporary password and login user with a temporary password, with latest step is to remove parameters from Url.
4. Great, you're all set!