I am very new to nativescript and I am using nativescript vue and try to configure ouath2 in a way that the login works via an out-of-app browser. The default for nativescript oauth2 seems to be creating an in-app web view of the login page.
According to the documentation, the following two steps should achieve the out-of-app browser bevavior for Android: In the AndroidManifest.xml,
- "Find the section named com.tns.NativeScriptActivity and add the attribute android:launchMode='singleTask' "
- "inside the activity add a new section with your custom url scheme(s)."
In order to keep it simple, I tried to figure it out with the vue-demo [1] and I did copy&paste with the instructions, so the activity section in my AndroidManifest looks as follows:
<activity
android:name="com.tns.NativeScriptActivity"
android:launchMode="singleTask"
android:label="@string/title_activity_kimera"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
android:theme="@style/LaunchScreenTheme">
<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- Custom URL Schemes -->
<data android:scheme="com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb"/>
<data android:scheme="msalf376fa87-64a9-89a1-8b56-e0d48fc08107"/>
</intent-filter>
</activity>
My Home.vue just has a button to open the microsoft login page as in the vue-demo:
methods: {
onLoginTap() {
auth_service_1.tnsOauthLogin("microsoft");
},
onLogoutTap() {
auth_service_1.tnsOauthLogout();
}
}
Auth-service.js is also from the demo:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var nativescript_oauth2_1 = require("nativescript-oauth2");
var providers_1 = require("nativescript-oauth2/providers");
var client = null;
function configureOAuthProviders() {
var microsoftProvider = configureOAuthProviderMicrosoft();
var googleProvider = configureOAuthProviderGoogle();
var facebookProvider = configureOAuthProviderFacebook();
nativescript_oauth2_1.configureTnsOAuth([microsoftProvider, googleProvider, facebookProvider]);
}
exports.configureOAuthProviders = configureOAuthProviders;
function configureOAuthProviderGoogle() {
var googleProviderOptions = {
openIdSupport: "oid-full",
clientId: "932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb.apps.googleusercontent.com",
redirectUri: "com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb:/auth",
urlScheme: "com.googleusercontent.apps.932931520457-buv2dnhgo7jjjjv5fckqltn367psbrlb",
scopes: ["email"]
};
var googleProvider = new providers_1.TnsOaProviderGoogle(googleProviderOptions);
return googleProvider;
}
function configureOAuthProviderFacebook() {
var facebookProviderOptions = {
openIdSupport: "oid-none",
clientId: "691208554415645",
clientSecret: "d8725ac416fa1bb1917ccffd1670e3c6",
redirectUri: "https://www.facebook.com/connect/login_success.html",
scopes: ["email"]
};
var facebookProvider = new providers_1.TnsOaProviderFacebook(facebookProviderOptions);
return facebookProvider;
}
function configureOAuthProviderMicrosoft() {
var microsoftProviderOptions = {
openIdSupport: "oid-full",
clientId: "f376fa87-64a9-49a1-8b56-e0d48fc0810b",
// redirectUri: "urn:ietf:wg:oauth:2.0:oob",
redirectUri: "msalf376fa87-64a9-49a1-8b56-e0d48fc0810b://auth",
urlScheme: "msalf376fa87-64a9-49a1-8b56-e0d48fc0810b",
scopes: ["https://outlook.office.com/mail.read"]
};
var microsoftProvider = new providers_1.TnsOaProviderMicrosoft(microsoftProviderOptions);
return microsoftProvider;
}
function tnsOauthLogin(providerType) {
client = new nativescript_oauth2_1.TnsOAuthClient(providerType);
client.loginWithCompletion(function (tokenResult, error) {
if (error) {
console.error("back to main page with error: ");
console.error(error);
}
else {
console.log("back to main page with access token: ");
console.log(tokenResult);
}
});
}
exports.tnsOauthLogin = tnsOauthLogin;
function tnsOauthLogout() {
if (client) {
client.logout();
}
}
exports.tnsOauthLogout = tnsOauthLogout;
My package.json:
{
"nativescript": {
"id": "org.nativescript.DemoAuthTest",
"tns-android": {
"version": "6.5.0"
},
"tns-ios": {
"version": "6.5.0"
}
},
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"@nativescript/theme": "~2.3.0",
"nativescript-oauth2": "^3.0.1",
"nativescript-vue": "~2.4.0",
"tns-core-modules": "~6.5.0"
},
"devDependencies": {
"@babel/core": "~7.1.0",
"@babel/preset-env": "~7.1.0",
"babel-loader": "~8.0.0",
"nativescript-dev-webpack": "~1.5.0",
"nativescript-vue-template-compiler": "~2.4.0",
"node-sass": "^4.7.1",
"vue-loader": "~15.4.0"
},
"gitHead": "20a65d338ae8f8911087ab6615b89363f864b07b",
"readme": "NativeScript Application"
}
Now the problem is: Even after the modifications to the AndroidManifest.xml, the login page is shown via an in-app web view, and not via an out-of-app browser. I was assuming that the Custom URL Schemes from the demo are probably dummies, so I did not expect it to work like this, but I expected at least a web browser to open after hitting the login button which runs the "onLoginTap()" method.
Does anybody know how to make oauth2 opening a web browser?
[1] https://github.com/alexziskind1/nativescript-oauth2/tree/master/demo-vue
