2016-12-04 8 views
0

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(); 
}); 

答えて

1

のようなものですscripts.startスクリプトで実行する必要があるもの(npm serve)。 npm inithttps://docs.npmjs.com/cli/init)を使用して、開始package.jsonファイルをまだ作成していない場合は作成することができます。

+0

package.jsonを「scripts」:{ "start": "serve" }と追加しましたが、それでも動作しません。私は、あなたが "依存関係を宣言する"と言った部分を見逃しましたか?私はどうしたらいいですか? –

+0

'--save'を使ってnpmのインストールを起動し、' package.json'ファイルの依存関係のリストに追加します。あるいは、あなた自身で書き込む方法については、参照文書を見てください:https://docs.npmjs.com /files/package.json – nitind

関連する問題