auth0.comのサンプルプロジェクトを使用して、自分のアプリのログインページをカスタマイズし、ソーシャルメディアログインを有効にしています。しかし、私はそれをbluemixに配備しようとすると何か問題が発生します。 私が従うビデオチュートリアルはhttps://www.youtube.com/watch?v=sHhNoV-sS_I&t=559s ですが、サンプルプロジェクトはビデオとは少し異なります。それを実行するには、コマンド "npm serve"が必要でした。 cf pushを使ってプロジェクトをプッシュすると、noappdeckedが表示されます。プロジェクトをbluemixにどのように配備できますか? app.jsコードとHTMLコードがauth0アプリをbluemixにデプロイするには
あなたが指示し、その後、あなたの依存関係の1つとしてserve
パッケージを宣言する最初、
https://console.ng.bluemix.net/docs/runtimes/nodejs/index.html#nodejs_runtimeで文書化
package.json
メソッドを使用します
<!DOCTYPE html>
<html>
<head>
<title>Auth0-VanillaJS</title>
<meta charset="utf-8">
<!-- Auth0 lock script -->
<script src="//cdn.auth0.com/js/lock/10.3.0/lock.min.js"></script>
<script src="auth0-variables.js"></script>
<script src="app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img alt="avatar" id="avatar" style="display:none;">
<p>Welcome <span id="nickname"></span></p>
<button type="submit" id="btn-login">Sign In</button>
<button type="submit" id="btn-logout" style="display:none;">Sign Out</button>
</body>
window.addEventListener('load', function() {
var lock = new Auth0Lock(AUTH0_CLIENT_ID, AUTH0_DOMAIN);
// buttons
var btn_login = document.getElementById('btn-login');
var btn_logout = document.getElementById('btn-logout');
btn_login.addEventListener('click', function() {
lock.show();
});
btn_logout.addEventListener('click', function() {
logout();
});
lock.on("authenticated", function(authResult) {
lock.getProfile(authResult.idToken, function(error, profile) {
if (error) {
// Handle error
return;
}
localStorage.setItem('id_token', authResult.idToken);
// Display user information
show_profile_info(profile);
});
});
//retrieve the profile:
var retrieve_profile = function() {
var id_token = localStorage.getItem('id_token');
if (id_token) {
lock.getProfile(id_token, function (err, profile) {
if (err) {
return alert('There was an error getting the profile: ' + err.message);
}
// Display user information
show_profile_info(profile);
});
}
};
var show_profile_info = function(profile) {
var avatar = document.getElementById('avatar');
document.getElementById('nickname').textContent = profile.nickname;
btn_login.style.display = "none";
avatar.src = profile.picture;
avatar.style.display = "block";
btn_logout.style.display = "block";
};
var logout = function() {
localStorage.removeItem('id_token');
window.location.href = "/";
};
retrieve_profile();
});
package.jsonを「scripts」:{ "start": "serve" }と追加しましたが、それでも動作しません。私は、あなたが "依存関係を宣言する"と言った部分を見逃しましたか?私はどうしたらいいですか? –
'--save'を使ってnpmのインストールを起動し、' package.json'ファイルの依存関係のリストに追加します。あるいは、あなた自身で書き込む方法については、参照文書を見てください:https://docs.npmjs.com /files/package.json – nitind