Блог

Я очень новичок в nativescript, и я использую nativescript vue и пытаюсь настроить ouath2 таким образом, чтобы вход в систему выполнялся через браузер вне приложения. По умолчанию для nativescript oauth2, похоже, создается веб-просмотр страницы входа в приложение.

Согласно документации, следующие два шага должны привести к появлению браузера вне приложения для Android: В AndroidManifest.xml,

1. «Найдите раздел с именем com.tns.NativeScriptActivity и добавьте атрибут android:launchMode=’singleTask’ «
2. «внутри действия добавьте новый раздел с вашими пользовательскими схемами URL».

Чтобы упростить задачу, я попытался разобраться с помощью vue-demo [1], и я скопировал и вставил инструкции, поэтому раздел activity в моем AndroidManifest выглядит следующим образом:

          <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 есть только кнопка для открытия страницы входа в систему Microsoft, как в vue-demo:

     methods: {
        onLoginTap() {
            auth_service_1.tnsOauthLogin("microsoft");
        },
        onLogoutTap() {
            auth_service_1.tnsOauthLogout();
        }
    }
  

Auth-service.js это тоже из демо-версии:

 "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;

  

Мой 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"
}

  

Теперь проблема в том, что даже после внесения изменений в AndroidManifest.xml , страница входа в систему отображается через веб-просмотр в приложении, а не через браузер вне приложения. Я предполагал, что пользовательские схемы URL-адресов из демонстрации, вероятно, являются фиктивными, поэтому я не ожидал, что это будет работать так, но я ожидал, что по крайней мере веб-браузер откроется после нажатия кнопки входа в систему, которая запускает метод «onLoginTap ()».

Кто-нибудь знает, как заставить oauth2 открывать веб-браузер?

[1] https://github.com/alexziskind1/nativescript-oauth2/tree/master/demo-vue