Как отобразить браузер In-App для потока openid appauth для приложения ionic 3? - PullRequest
Новая
       41

Как отобразить браузер In-App для потока openid appauth для приложения ionic 3?

0 голосов
/ 23 мая 2019

Я использую поток кода авторизации с использованием этой библиотеки - https://github.com/openid/appauth-js

У меня есть, когда приложение запускается, эта конечная точка называется https://link.com/.well-known/openid-configuration, а затем я перенаправлен на путь сервера идентификации, передавая мои учетные данные.

Проблема в том, что я не хочу, чтобы пользователь покинул приложение, я хочу, чтобы в браузере приложения отображалось.Я не совсем уверен, как это сделать.Как мне реализовать этот плагин - https://ionicframework.com/docs/v3/native/in-app-browser/

app.component.ts 

constructor(){
this.authFlow.fetchServiceConfiguration().then((resp) => {
        console.log(resp, 'logging response')
        this.authFlow.makeAuthorizationRequest()
});
}

auth.flow.ts 

fetchServiceConfiguration() {
    return AuthorizationServiceConfiguration.fetchFromIssuer(
      openIdConnectUrl,
      requestor
    ).then(response => {
      // log("Fetched service configuration", response);
      console.log(response, 'logging response from fetch issuer')
      this.configuration = response;
    }).catch((err) => {
      console.log(err, 'logging error')
    });
  }

  makeAuthorizationRequest(username?: string) {
    if (!this.configuration) {
      // log("Unknown service configuration");
      return;
    }

    const extras: StringMap = { prompt: "consent", access_type: "offline" };
    // if (username) {
    //   extras["login_hint"] = username;
    // }

    // create a request
    const request = new AuthorizationRequest({
      client_id: clientId,
      redirect_uri: redirectUri,
      scope: scope,
      response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
      state: undefined,
      // extras: extras
    });

    // log("Making authorization request ", this.configuration, request);

    this.authorizationHandler.performAuthorizationRequest(
      this.configuration,
      request
    );
  }

1 Ответ

0 голосов
/ 24 мая 2019

Добавление плагинов 

# Ionic and Cordova plugins
ionic cordova plugin add cordova-plugin-inappbrowser

# Ionic Native with (--save not required on npm@5 and above).
npm install @ionic-native/in-app-browser --save

Настройка

внутри app.module.ts: 

import { InAppBrowser } from '@ionic-native/in-app-browser';

@NgModule({
  providers: [
    ...
    InAppBrowser
  ]
})

Шаблон внутри home.html: 

<ion-header>
  <ion-navbar color="dark">
    <ion-title>
      InAppBrowser
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-item>
    <ion-label floating>URL</ion-label>
    <ion-input type="url" [(ngModel)]="url"></ion-input>
  </ion-item>

  <button ion-button block clear (click)="openWebpage(url)">Open Webpage</button>

</ion-content>

Компонент 

import { Component, OnInit } from '@angular/core';
import { InAppBrowser, InAppBrowserOptions } from "@ionic-native/in-app-browser";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  url: string;  

  constructor(private inAppBrowser: InAppBrowser) { }

  openWebpage(url: string) {
    const options: InAppBrowserOptions = {
      zoom: 'no'
    }

    // Opening a URL and returning an InAppBrowserObject
    const browser = this.inAppBrowser.create(url, '_self', options);

   // Inject scripts, css and more with browser.X
  }
}
...