gsoulie
December 10, 2020, 2:44pm
#1
Hi all,
I’m facing a problem with redirecting to my capacitor android/ios app after login with angular oauth2 oidc.
I’m using identity server with angular-oauth2-oidc lib to authenticate my users. This works very well when i test with ionic serve, but i get an “unhautorized client” error when testing on mobile.
My problem is (i think) my redirectUri. I tried a lot of things but i still not found what to set inside…
Here is my is4.conf.ts file
export const authConfig: AuthConfig = {
issuer: environment.authIS4Api,
clientId: environment.authIS4clientId,
responseType: 'code',
redirectUri: 'com.myapp.mybundle:/home', // window.location.origin // <-- for ionic serve
postLogoutRedirectUri: 'com.myapp.mybundle:/home', // window.location.origin // <-- for ionic serve
scope: environment.authIS4scope,
useSilentRefresh: true,
silentRefreshTimeout: 20000,
timeoutFactor: 0.75,
sessionChecksEnabled: true,
showDebugInformation: true,
clearHashAfterLogin: false,
nonceStateSeparator : 'semicolon'
};
And my bootstrap code :
initializeApp(): void {
this.oauthService.configure(authConfig);
this.oauthService.loadDiscoveryDocumentAndLogin(); // redirige vers la page d'authent kalya uniquement si pas authentifié
// Automatically load user profile
this.oauthService.events
.pipe(filter(e => e.type === 'token_received'))
.subscribe(_ => this.oauthService.loadUserProfile());
this.oauthService.setupAutomaticSilentRefresh();
}
I also add the following intent in my AndroidManifest.xml
<intent-filter>
<data android:scheme="com.myapp.mybundle"/>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
</intent-filter>
If you got an idea… Thanks a lot
LBopp
December 23, 2020, 2:44pm
#2
Hi, I had a similar issue, this solved it for me:
Enhance your capacitor.config.json with:
"server": {
"iosScheme": "ionic",
"hostname": "app",
},
Then, your identity provider needs to allow the redirectUri “ionic://app”.
Hi LBopp, thanks for your reply.
I will try it quickly in the coming few weeks.
ps : Happy new year !!
gsoulie
January 8, 2021, 10:15am
#4
Hi,
Supposing i enhance my capacitor.config.json with :
"server": {
"iosScheme": "ionic",
"hostname": "com.myapp.mybundle",
},
What about my redirectUri and postLogoutRedirectUri in my is4.config.ts file ?
Do i need to replace them by somethig like that ?
redirectUri: 'ionic://com.myapp.mybundle:/home',
postLogoutRedirectUri: 'ionic://com.myapp.mybundle:/home',
Thanks.
LBopp
January 8, 2021, 10:35am
#5
Hi,
I don’t have an is4.config.ts file in my project. If the redirectUri you are talking about is used for the OAuth process, I used
redirectUri: window.location.origin
as redirectUri.
Our app runs as webapp + as iOS app, so with window.location.origin the correct url is set automatically and we don’t need to differentiate if the app is currently deployed as web-app (https://my-app.domain ) or iOS app (ionic://app)
Hope that helps
Happy new year to you too
gsoulie
January 13, 2021, 4:43pm
#6
Not tested yet on ios but it seems it doesn’t work with Android i’m still searching for the good solution.
Here is my is4 configuration file for redirectURI :
export const authConfig: AuthConfig = {
issuer: environment.authIS4Api,
clientId: environment.authIS4clientId,
responseType: 'code',
redirectUri: window.location.origin + '/home',
postLogoutRedirectUri: window.location.origin + '/home',
scope: environment.authIS4scope,
useSilentRefresh: true,
silentRefreshTimeout: 20000,
timeoutFactor: 0.75,
sessionChecksEnabled: true,
showDebugInformation: true,
clearHashAfterLogin: false,
nonceStateSeparator : 'semicolon'
};
capacitor.config.json
"server": {
"iosScheme": "ionic",
"androidScheme": "http",
"hostname": "com.myapp.mybundle",
},
android.manifest.xml
<intent-filter>
<data android:scheme="@string/custom_url_scheme"/>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
</intent-filter>
strings.xml
<resources>
<string name="app_name">myappname</string>
<string name="title_activity_main">myappname</string>
<string name="package_name">com.myapp.mybundle</string>
<string name="custom_url_scheme">com.myapp.mybundle</string>
</resources>
My SSO accepted routes (i tried a ton of routes)
com.myapp.mybundle://
http://com.myapp.mybundle
com.myapp.mybundle://home
...
I don’t know if i need to use DeepLink or other stuff…I tried to many things…
1 Like
LBopp
January 27, 2021, 7:30am
#7
The sso accepted route needs to support the combination of iosScheme and hostname: ionic://com.myapp.mybundle
Aboud Android configs, I don’t know, sry
Had any luck with redirecting ?
I finally changed my authentication lib. I replaced angular-oauth2-oidc by ionic-appauth (ionic-appauth - npm ). angular-oauth2-oidc seems doesn’t work with capacitor for mobile app. There is an issue to get the token back after authenticate.
I followed that sample repos GitHub - wi3land/ionic-appauth-capacitor-demo .
Here is my environment configuration :
export const environment = {
production: false,
SERVER_URL: <MY-SERVER-URL>,
auth_config: {
client_id: 'my.clientid',
server_host: 'https://sso.server.com',
redirect_url: 'com.myapp.app://callback',
end_session_redirect_url: 'com.myapp.app://endsession',
scopes: 'openid profile email roles offline_access',
pkce: true
}
};
Then in your SSO config, add the following routes
com.myapp.app://callback
com.myapp.app://endsession
my capacitor.config.json
{
"appId": "com.myapp.app",
"appName": "com.myapp.app",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"plugins": {
"SplashScreen": {
"launchShowDuration": 3000
},
"Keyboard": {
"resize": "ionic"
}
},
"cordova": {}
}
Hi,
Could you please share the service side client configuration sample code?.
Here is my sample code but it is not working,
new Client
{
ClientName = “spa”,
ClientId = “spa”,
AccessTokenType = AccessTokenType.Jwt,
AlwaysIncludeUserClaimsInIdToken = true,
AlwaysSendClientClaims = true,
AllowPlainTextPkce = true,
RequireConsent = true,
AccessTokenLifetime = 330,
IdentityTokenLifetime = 30,
AllowedGrantTypes = { GrantType.AuthorizationCode },
AllowAccessTokensViaBrowser = true,
ClientUri = “http://localhost:8100 ”,
RedirectUris = new List
{
“http://localhost:8100/auth/callback ”
},
PostLogoutRedirectUris = new List
{
“http://localhost:8100/auth/endsession ”
},
AllowedCorsOrigins = new List
{
“http://localhost:8100 ”
},
AllowedScopes = new List
{
IdentityServerConstants.StandardScopes.OpenId,
IdentityServerConstants.StandardScopes.Profile,
IdentityServerConstants.StandardScopes.Email,
IdentityServerConstants.StandardScopes.OfflineAccess
},
AllowOfflineAccess = true,
RequirePkce = true,
Enabled = true
}
Could you please share the service side client configuration sample code?.
Here is my sample code but it is not working, let me what correct configuration,
new Client
{
ClientName = “spa”,
ClientId = “spa”,
AccessTokenType = AccessTokenType.Jwt,
AlwaysIncludeUserClaimsInIdToken = true,
AlwaysSendClientClaims = true,
AllowPlainTextPkce = true,
RequireConsent = true,
AccessTokenLifetime = 330,
IdentityTokenLifetime = 30,
AllowedGrantTypes = { GrantType.AuthorizationCode },
AllowAccessTokensViaBrowser = true,
ClientUri = “http://localhost:8100 ”,
RedirectUris = new List
{
“http://localhost:8100/auth/callback ”
},
PostLogoutRedirectUris = new List
{
“http://localhost:8100/auth/endsession ”
},
AllowedCorsOrigins = new List
{
“http://localhost:8100 ”
},
AllowedScopes = new List
{
IdentityServerConstants.StandardScopes.OpenId,
IdentityServerConstants.StandardScopes.Profile,
IdentityServerConstants.StandardScopes.Email,
IdentityServerConstants.StandardScopes.OfflineAccess
},
AllowOfflineAccess = true,
RequirePkce = true,
Enabled = true
}
I have nothing special on server side. I use Identity Server and i just added my routes (com.myapp.app://callback and com.myapp.app://endsession) on redirect Uris and Cors sections.
Are you running on a real device and using capacitor ?