私はReactで動作するようにGoogle認証を取得するために一日中努力してきましたが、何時間も検索した結果、私はたぶんバグがあり、ときどき動作しなくなりました。誰かが私が間違っていることを見ることができますか？ （これは私が学んでいるスクールプロジェクトのためです）ReactJsで動作するGoogle認証を取得するにはどうすればよいですか？
このプロジェクトはオンラインスケジュール作成者になります。
私の主なIndex.jsは、以下のレンダリング機能を持っています
function renderApp() {
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={Login}></Route>
<Route component={AuthUserContainer}>
<Route path="/auth" component={Layout}>
<IndexRoute component={Overview}></IndexRoute>
<Route path="schedule(/:scheduleid)" component={Schedule}></Route>
</Route>
</Route>
</Router>,
app);
}
ホーム・ページには、単に認証の場合は/認証にユーザーをリダイレクトするログインコンポーネントによって処理されるログインページであり、成功した。保護されたルートにアクセスするたびに、認証はAuthUserContainerによって継続的に処理されます。
ログインコンポーネントにはGoogleログインボタンがあり、すべての保護されたルートには（レイアウトコンポーネント経由で）Googleログアウトボタンがあります。私はグーグルに独自のコード例を使用して反応のためにそれを微調整しようとした
export default class Header extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.SignOutHandler = this.SignOutHandler.bind(this);
}
SignOutHandler() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function() {
console.log('User signed out.');
Authenticate.signOutUser();
});
}
render() {
return (
<div class="header-content">
<h2 class="header-title">Schedule</h2>
<h3 class="header-user-button">
<a href="/" onClick={this.SignOutHandler}>User First Name</a>
</h3>
</div>
);
}
}
：
マイHeader.jsは「Googleがログアウトボタン」（signOutHandler）が含まれています。私がこのコードで得る問題は、 "Uncaught TypeError：未定義のプロパティ 'getAuthInstance'を読み取ることができません。サインインボタンとサインアウトボタンを別々のページに分割するので、auth2は正しく初期化されませんが、ボタンを2回クリックすると動作します。ここではそれを手動で初期化しようとすると、多くの場合、私にGAPIが未定義であるというエラーを与える...
最後にLogin.js：
export default class Login extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onSignIn = this.onSignIn.bind(this);
this.renderGoogleLoginButton = this.renderGoogleLoginButton.bind(this);
}
renderGoogleLoginButton() {
console.log('rendering google signin button')
gapi.signin2.render('my-signin2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 200,
'height': 50,
'longtitle': true,
'theme': 'light',
'onsuccess': this.onSignIn
});
gapi.load('auth2', function() {
gapi.auth2.init();
});
}
componentDidMount() {
window.addEventListener('google-loaded', this.renderGoogleLoginButton);
}
onSignIn(googleUser) {
Authenticate.signInUser(googleUser.getBasicProfile());
this.props.router.push("/auth");
}
render() {
return (
<div class="container">
<h2 class="form-signin-heading">
Sign-in with Google account required
</h2>
<div id="my-signin2"></div>
</div>
);
}
}
私は自分のグーグルでも、このコードをベースにしていますが、それは動作しませんでしたボタンはロードされず、単純に何も表示されなかったか、onSignInを呼び出さなかったかのいずれかです。私も見つけてthisを試しました。それはちょっとした仕事（時には）になりました。私はまた、renderGoogleLoginButton（）でauth2を初期化しようとしましたが、時にはうまく動作しません...
renderGoogleLoginButton（）は、Google APIの読み込み時に発生するカスタムイベント（google-loaded） （ちょうどリンクのように）。 Authenticateは自分のクラスで、トークンの作成、getUserName関数などをバンドルしています。
また、gapiから次のエラーが表示されます。「キャッチされないTypeError：プロパティ 'style' of nullを読み取れません。 [Sign In/Sign Out]ボタンが表示されますが、nullの時点ではロードされていないためです。
グリッチやバグが発生しない優れた解決策が見つかりません。 Googles own codeはすべて同じHTML文書内に配置されますが、コンポーネントに分割して分割したいからです。おそらく私はこれを完全に間違ってやっていますか？私はReactにはとても新しいですが、うまくいけばわかります！
ご迷惑をおかけして申し訳ございませんが、ご迷惑をおかけして申し訳ございません。