fix: Update Google Sign In setup to use new Google Auth Platform #393
Conversation
|
Once the docs are approved, I'll copy over the changes for previous versions |
marcelomendoncasoares
left a comment
marcelomendoncasoares
left a comment
There was a problem hiding this comment.
Nice improvements! Have some suggestions to move a bit of more advanced content to other sessions.
One mental image that helped me get the idea on the docs organization is that the setup page is actually a guide, and the other pages are docs with the more advanced steps. We aim to have the guide as straightforward and simple as possible for users to quickly experiment with the feature, and defer to more advanced sections for when they already have it working.
An addition that is also pending here is to show the possibility of using --dart-define flags to set the clientId and serverClientId on the app. I had this mapped for a while and would be nice if you could also mix in this PR. The feature is documented in this comment (summarized below):
The solution that we have found (to manage separate client IDs for web, Android, and iOS in a centralized way) was to expose platform specific configuration through optional environment variables - both for Google and Apple. This way, for those that do not want to set them directly on the code, it is possible to pass them during build using the
--dart-defineoption.As an example, for the Google Sign-In we exposed the variables
GOOGLE_CLIENT_IDandGOOGLE_SERVER_CLIENT_ID. IfclientIdandserverClientIdvalues are not supplied when initializing the service on the code below, the provider will try to fetch them from the environment variables.It is on the user to manage such environment variables and define which value to use for each platform, but no boilerplate is necessary on the code to forward platform specific configuration.
Here is the example on how to use it:
flutter run \
-d "<android_device>" \
--dart-define="GOOGLE_CLIENT_ID=<android_client_id>.apps.googleusercontent.com" \
--dart-define="GOOGLE_SERVER_CLIENT_ID=<web_client_id>.apps.googleusercontent.com"| ### Enable Google Auth Platform | ||
|
|
||
| If you haven't already, enable the Google Auth Platform for your project. Navigate to the [Google Auth Platform overview](https://console.cloud.google.com/auth/overview) and click _Get started_. | ||
|
|
||
|  | ||
|
|
||
| ### Enable People API | ||
|
|
||
| To be allowed to access user data and use the authentication method in Serverpod we have to enable the People API in our project. | ||
|
|
||
| [Enable it here](https://console.cloud.google.com/apis/library/people.googleapis.com) or find it yourself by navigating to the _Library_ section under _APIs & Services_. Search for _Google People API_, select it, and click on _Enable_. | ||
|
|
||
| ### Setup OAuth consent screen | ||
| ### Configure Google Auth Platform | ||
|
|
||
| The setup for the OAuth consent screen can be found [here](https://console.cloud.google.com/apis/credentials/consent) or under _APIs & Services_ > _OAuth consent screen_. | ||
| Configure the following settings in the Google Auth Platform: | ||
|
|
||
| 1. Fill in all the required information, for production use you need a domain that adds under `Authorized` domains. | ||
| 1. **Branding**: Navigate to the [Branding](https://console.cloud.google.com/auth/branding) page to configure your app's branding information. For production use, you need to add your domain under _Authorized domains_. | ||
|
|
||
| 2. Add the scopes `.../auth/userinfo.email` and `.../auth/userinfo.profile`. | ||
|
|
||
| 3. Add your email to the test users so that you can test your integration in development mode. | ||
| 2. **Data Access**: Navigate to the [Data Access](https://console.cloud.google.com/auth/scopes) page to add the required scopes. Add the scopes `.../auth/userinfo.email` and `.../auth/userinfo.profile`. | ||
|
|
||
|  | ||
|
|
||
| 3. **Audience**: Navigate to the [Audience](https://console.cloud.google.com/auth/audience) page to add test users. Add your email so you can test your integration in development mode. | ||
|
|
There was a problem hiding this comment.
Question: Can we merge the two sessions about Google Auth Platform? They are separate by the Enable People API, but can this order be altered? Or this is strictly necessary due to the order of operations on the console?
| Configure the following settings in the Google Auth Platform: | ||
|
|
||
| 1. Fill in all the required information, for production use you need a domain that adds under `Authorized` domains. | ||
| 1. **Branding**: Navigate to the [Branding](https://console.cloud.google.com/auth/branding) page to configure your app's branding information. For production use, you need to add your domain under _Authorized domains_. |
There was a problem hiding this comment.
Question: This is optional, right? If so, we can ignore this completely and only have a tip at the end of the session referring to the official Google docs for extra options that can be configured.
| 2. Add the scopes `.../auth/userinfo.email` and `.../auth/userinfo.profile`. | ||
|
|
||
| 3. Add your email to the test users so that you can test your integration in development mode. | ||
| 2. **Data Access**: Navigate to the [Data Access](https://console.cloud.google.com/auth/scopes) page to add the required scopes. Add the scopes `.../auth/userinfo.email` and `.../auth/userinfo.profile`. |
There was a problem hiding this comment.
Question: Is this also optional? Differently from Branding, this one might be more useful for users that want to use the callback we offer with the access token. However, given that this is a more advanced configuration, it is better to have it close to where we show how to use the access token.
There was a problem hiding this comment.
Nice to have the dark mode!
Is it possible to increase the resolution of the new screenshots (in general, not only this one)? The previous were a little bit sharper (you can see they were using considerably higher resolution).
There was a problem hiding this comment.
This one is not much visible due to the resolution, and can also be a lot smaller to better fit the content.
| Create the client credentials in the Google Auth Platform. Navigate to _Clients_ and click _Create Client_. Configure the OAuth client as Application type _**Android**_. | ||
|
|
||
| Fill in all required information, you can get the debug SHA-1 hash by running `./gradlew signingReport` in your Android project directory. Create the credentials and download the JSON file. | ||
|
|
There was a problem hiding this comment.
Suggestion: It would be good to add a tip here redirecting users to the official troubleshooting guide for problems on Android in case they face issues. This is the only one of the three (android, ios, web) that has such section and we have already received support questions that the solution was in there.
2 participants
No description provided.