Firebase를 사용하는 반응 네이티브 앱이 있습니다 ( "@ react-native-firebase / auth": "^ 6.0.1"포함).
앱에는 하나의 Webview가 있습니다 ( "react-native-webview": "^ 7.5.2"포함).
사용자가 로그인하면 다음을 사용하여 jwt에 액세스 할 수 있습니다.
auth().currentUser.getIdTokenResult()
.then(jwtToken => {
console.log('jwtToken: ', jwtToken.token);
})
이제 사용자가 Webview를 열고 webview가 내 firebase 호스팅 페이지를 가리 키기 때문에 여전히 연결되어 있어야합니다.
<WebView
source={{
uri: 'my-firebase-hosting-url',
headers: {
Authorization: jwtToken,
},
}}
renderLoading={this.renderLoadingView}
startInLoadingState={true}
sharedCookiesEnabled={true}
thirdPartyCookiesEnabled={true}
domStorageEnabled={true}
ref={ref => {
this.webview = ref;
}}
/>
서버 측에서는 익스프레스 및 쿠키 세션을 설정했습니다.
사용자가 webview에 로그인하지 않은 것 같습니다. 서버 측에서 console.log (req.session)하면 빈 개체 {}이 표시됩니다.
여러 옵션을 시도했지만 iOS 에서는 작동하지 않는 것 같습니다 (아직 Android에서는 시도하지 않음).
무엇을 놓치고 있습니까? 프런트 엔드 / 백엔드에 추가 단계가 있습니까? (아직 프로그래밍이 처음입니다)
도와 주셔서 감사합니다.
나는 마침내 그것을 해결했고 다른 사람들에게 도움이되기를 바랍니다.
상태 디자인
state = {
shouldRenderWebview: false,
authorization: ''
...
생성자에서 firebase에서 새로 고침 된 토큰을 가져옵니다.
auth()
.currentUser.getIdTokenResult()
.then(result => {
this.setState({
authorization: result.token,
shouldRenderWebview: true,
});
})
로딩 뷰를 표시하거나 (토큰을받는 동안) 웹뷰를 렌더링하도록 주요 구성 요소를 디자인합니다.
웹뷰 (코드에 '베어러'추가)
const Authorization = 'Bearer ' + this.state.authorization;
<WebView
source={{
uri: this.state.urlToGo,
headers: {
Authorization,
},
}}
....
백엔드에서 인증 코드가 유효한지 확인하십시오.
firebase.auth().verifyIdToken(req.headers.authorization.substr(7));
그런 다음 결과에 따라 작업을 수행하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다