使用天蓝色进行身份验证并重定向到电容器后,混合应用程序加载问题

时间:2019-05-27 11:57:12

标签: reactjs authentication ionic-framework hybrid-mobile-app capacitor

我正在使用Azure使用身份验证设置混合应用程序,我通过身份验证成功,并且能够发送回重定向URL'capacitor:// localhost / callback'。一旦我重定向到重定向URI,App就会显示空白屏幕,并且没有任何内容呈现或正常工作(React-router,react.js)。

Index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './serviceWorker';

import { HashRouter} from 'react-router-dom';
import {Plugins} from '@capacitor/core'
import ionCapContext from '@auth/ionicCapacitor'
const { SplashScreen } = Plugins
const renderApp = function (){

 const rootDiv = document.getElementById('root') as HTMLElement;

 ReactDOM.render(

 <HashRouter>

 <App />

 </HashRouter>

 , rootDiv);

 registerServiceWorker();

}
if (window.cordova) {

 document.addEventListener("deviceready", () => {

 SplashScreen.hide();

 ionCapContext.AuthContext().then(d=>{

 renderApp()

 }).catch(e=>console.log(e))
 

 }, false)

}

else {

 renderApp()

}

ionicCapacitor.ts

import {registerWebPlugin} from "@capacitor/core";

import {OAuth2Client,OAuth2AuthenticateOptions} from '@byteowls/capacitor-oauth2';

import {

 Plugins

 } from '@capacitor/core';

export const authOptions:OAuth2AuthenticateOptions = {

 appId:'<APPID>', authorizationBaseUrl:'https://login.microsoftonline.com/organizations/oauth2/v2.0/authorize',
 accessTokenEndpoint:'capacitor://localhost/#/AuthCallback',
 scope:'user.read',
 responseType:'token',
 state:<State Token>,
 web:{
 redirectUrl:window.location.origin
 },
 ios:{
 customScheme:'capacitor://localhost/#/AuthCallback'
 }
}

class capacitorAuth {

 constructor(){

 registerWebPlugin(OAuth2Client);

 }

 async AuthContext(){

 const respo = await Plugins.OAuth2Client.authenticate(authOptions)
 return respo;

 }

}

const ionCapContext = new capacitorAuth();
 

export default ionCapContext;

0 个答案:

没有答案