Connecting to OAuth services (Optional)
Ensemble supports authorizing and fetching data from OAuth2 services like Google and Microsoft. The entire flow is handled automatically if you are using Ensemble Go to preview your app.
When deploying your Production App and you'd like to use OAuth Services, please follow these instructions to configure your back-end server to work with Ensemble's UI.
App Redirect
When an OAuth flow is initiated within the UI, Ensemble will redirect the users to the appropriate OAuth service's login page. Once the users enter their username/password and authorize your app, the OAuth service will invoke a callback URL (known as Redirect URL) that your app defines. This Redirect URL will re-open your app and continue the OAuth flow.
The Redirect URL to open your App can be a Http App Link or a Custom Scheme (non-http).
Custom Scheme
iOS
- Look for
CFBundleURLTypes
inside the ios/Runner/Info.plist and update accordingly.CFBundleURLName
- By convention match this with your bundleIDCFBundleURLSchemes
- When registering with the OAuth services, they may give you a unique string or enable you to enter your own. The scheme follows this formatsome.globally.unique.scheme://<string>
. This has to be unique so it doesn't clash with any other apps out there.- Enter only the portion before the
://
.
- Enter only the portion before the
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>com.mycompany.myapp</string>
<key>CFBundleURLSchemes</key>
<array>
<string>some.globally.unique.scheme</string>
</array>
</dict>
</array>
Android
- Open
android/app/src/main/AndroidManifest.xml
. Look for the callback Activity and add anintent-filter
for your callback. - e.g. if your callback URL looks like this
some.globally.unique.scheme://authorize
, the android:scheme should besome.globally.unique.scheme
, and android:host should beauthorize
.
<activity
android:name="com.linusu.flutter_web_auth_2.CallbackActivity"
android:exported="true">
<intent-filter android:label="flutter_web_auth_2">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- enter your callback scheme and host here -->
<data
android:scheme="some.globally.unique.scheme"
android:host="authorize" />
</intent-filter>
<!-- other callbacks -->
<intent-filter ....>
Http App Link
Using a URL to redirect and open your App requires two steps for each platform: 1. adding a configuration similar to the custom schemes above, and 2. prove that you own the redirect URL's domain.
iOS
- Open
ios/Runner/Runner.entitlements
and add an entry for the URL you want to redirect to your App. Note the required prefixapplinks:
. - For example, if your want the URL
https://auth.mycompany.com/callback
to open your app. Enter only the domain to the URL below.
<dict>
<key>com.apple.developer.associated-domains</key>
<array>
<!-- other URLs -->
<string>applinks: .... </string>
<!-- add your URL, either root or subdomain is OK -->
<string>applinks:auth.mycompany.com</string>
</array>
</dict>
- Prove that you own the domain URL above by uploading the json file below to your domain (or subdomain - depending what you used).
- The file should be called
apple-app-site-association
and served with Content-Type ofapplication/json
. - The file can be at the root of your server or under a folder called
.well-known
. - Using the example URL above, add
/callback
to the paths.
- The file should be called
{
"applinks": {
"apps": [],
"details": [
{
"appID": "<your_app_team_ID>.<your_app_bundle_id>", // e.g. 3GHDU3434.com.mycompany.myapp
"paths": ["/<path after the domain>"] // e.g. /callback
},
{
.. other Apps and paths here ...
}
]
}
}
Android
- Open
android/app/src/main/AndroidManifest.xml
. Look for the callback Activity and add anintent-filter
for your callback.- android:host is the URL domain or subdomain that will open the app, while android:pathPrefix is the path after the domain.
- For example, use the below if your want the URL
https://auth.mycompany.com/callback
to open your app.
<intent-filter android:label="flutter_web_auth_2">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:scheme="https"
android:host="auth.mycompany.com"
android:pathPrefix="/callback" />
</intent-filter>
- Prove that you own the domain URL above by uploading the json file below to your domain (or subdomain - depending what you used).
- The file should be called
assetlinks.json
and served with Content-Type ofapplication/json
. - The file can be at the root of your server or under a folder called
.well-known
. - Get your app's SHA256 by going to Google Play's developer console.
- The file should be called
[
{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.mycompany.myapp",
"sha256_cert_fingerprints": [
"<your_app_sha256>",
]
}
}
]
Server component
Once the OAuth service successfully authenticates the user and redirect back to our App, we will be making a call to your server and pass the OAuth code. Your service will be exchanging this code for the access/refresh token.
- We provide the sample server code in Node (deployable with Firebase).
- Open
ensemble/ensemble-config.yaml
and go toservices -> apiAuthorization
.- Replace the
tokenExchangeServer
- Replace the