0

I'm a beginner in Javascript and learning how to create websites. I'm trying to add a google+ sign in feature into my web app but couldn't pass session information through javascript. I have 2 js files - login.js and profile.js. When a user logs in, login.js will run, and load a function from profile.js. I included both scripts in the index.html file but still gets this error: loadProfile is not defined. Been stuck for days and really appreciate some guidance!

Here's my code

index.html 

  {head}
    {script src="https://apis.google.com/js/plusone.js"}{/script}
    {script src="https://apis.google.com/js/client:plusone.js"}{/script}
  {/head}
  {body}
  {script type="text/javascript" src="Scripts/profile.js"}{/script}
  {script type="text/javascript" src="Scripts/login.js"}{/script}
  {input type="button" id="login" value="Login" onclick="login()" /}
  {input type="button" id="logout" class="hide" value="Logout" onclick="logout()" /}
  {script type="text/javascript" src="Scripts/logout.js"}{/script}
  {/body}

login.js

function login() {
   var myParams = {
'clientid' : '699XXXXXXX.apps.googleusercontent.com',
'cookiepolicy' : 'single_host_origin',
'callback' : 'loginCallback', 
'approvalprompt':'force',
'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com /auth/plus.profile.emails.read'
 };
gapi.auth.signIn(myParams);
}

function loginCallback(result) {
  if(result['status']['signed_in']) {
  alert("Login Success");
  var obj = gapi.auth.getToken();
  loadProfile();                // Calls loadProfile() from profile.js
  }
 }

profile.js

function loadProfile(){  
var request = gapi.client.plus.people.get( {'userId' : 'me'} );
request.execute(loadProfileCallback());
  }  
function loadProfileCallback(obj) {
profile = obj;
email = obj['emails'].filter(function(v) {
    return v.type === 'account';
})[0].value; 
displayProfile(profile);
  }
>>> subsequently it's just some callback functions
orbital
  • 91
  • 2
  • 5

1 Answers1

0

You can simply write some inline Javascript in your HTML on before your file declarations like so:

<script>
    function loadProfile(){  
        var request = gapi.client.plus.people.get( {'userId' : 'me'} );
        request.execute(loadProfileCallback());
    } 
</script>
<script type="text/javascript" src="Scripts/profile.js"></script>
<script type="text/javascript" src="Scripts/login2.js"></script>

In this way, this function is available globally for all subsequent files to use. Refer to this answer: Can we call the function written in one JavaScript in another JS file? that had the same problem that you had and has an excellent explanation as to the scope of the files and their usage.

Community
  • 1
  • 1
Aegis
  • 190
  • 1
  • 11
  • I tried putting the function into index.html but it gives rise to another problem: Error: gapi.client.plus is undefined. It seems that I have to complete my login.js before I can call loadProfile(), so I can't put this inline with index.html. – orbital Jun 11 '14 at 05:07
  • Where is the gapi variable defined? As you have not linked it, I cannot see where the variable has been declared, have you correctly referenced the google api script? – Aegis Jun 11 '14 at 08:10
  • The gapi is Google+ API, which I have included in index.html header. Then I call the initializing process with login.js and perform the authorization check for Google+ log in – orbital Jun 11 '14 at 14:00