iOS Facebook SDK Login

I'm facing an issue with logging in to my website using the Facebook JS API on my iPhone. The login process works smoothly on a computer and iPad, but I encounter a problem on my iPhone.

When attempting to log in on my iPhone, I am directed to a screen that appears differently than expected:

Upon trying to close the Facebook screen with the message "Back to previous page" and reloading the login page, I am able to successfully log in. It seems like the issue lies in the inability of the iPhone to close the login pop-up screen.

Below is the JavaScript code being used:

  <div id="fb-root"></div>
  <script type="text/javascript">
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '', // the app id
        status     : true,
        cookie     : true,
        xfbml      : true
      });
      FB.getLoginStatus(function(response) {
        if (response.status == "connected") {
          // do something
        }
      });

      FB.Event.subscribe("auth.login", function(response) {
        if (response.status == "connected") {
          // do something
        }
      });
    };

    function facebookRedirectLogin(redirect) {
      // do something
    }

    function logout() {
      FB.logout(function(response) {
        // do something
      });
    }
    (function(d){
       var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all.js";
       d.getElementsByTagName('head')[0].appendChild(js);
     }(document));
  </script>
  <div class="fb-login-button" style="margin-bottom: 20px;">Connect with Facebook</div>

How can I address this issue and resolve it?

javascriptiphonefacebook-javascript-sdk

Answer №1

Take a look at this link,

Kindly follow the instructions provided in the link above to configure your settings. This code is designed to function properly on mobile devices.

<html>
<head>
  <title>My Facebook Login Page</title>
</head>
<body>
  <div id="fb-root"></div>
    <div id="login">
        <p><button onClick="loginUser();">Login</button></p>
    </div>
    <div id="logout">
        <p><button  onClick="FB.logout();">Logout</button></p>
    </div>

    <script>
        function loginUser() {    
            FB.login(function(response) { }, {scope:'email'});     
        }
    </script>
  <script>
      (function() {
        var e = document.createElement('script'); e.async = true;
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
            }());
    </script>
    <script>
      window.fbAsyncInit = function() {
        FB.init({ appId: 'xxxxxxxxxxxx', 
          status: true, 
          cookie: true,
          xfbml: true,
          oauth: true});

          FB.Event.subscribe('auth.authResponseChange', handleResponseChange);  
        };
    </script>
    <script>
        function handleReponseChange(response) {
            document.body.className = response.authResponse ? 'connected' : 'not_connected';

            if (response.authResponse) {
                alert(response);
            }
        }
    </script>

</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in Asp.net: 'test' is not defined in Microsoft JScript runtime

I'm encountering an issue with an ImageButton that has an onclientclick() method. Whenever I click the button, I receive the error Microsoft JScript runtime error: 'test' is undefined. Below is the full code snippet: <%@ Page Langua ...

javascriptasp.net

Implementing Singletons in Node.js

While examining some code, I came across the following snippet: var Log = require('log'); // This creates a singleton instance module.exports = new Log('info'); Initially, my reaction was doubting that it could be considered a single ...

javascriptnode.jsrequire

Use YUI to parse JSON data enclosed in square brackets and curly braces within a packet

Recently, I have been diving into the world of JSON, JavaScript, and YUI while working on a homework assignment. The JSON packet I am dealing with has the following structure: [{"id":"1234", "name":"some description","description":"url":"www.sd.com"}, {sa ...

javascriptajaxyui

Collision Detection within a THREE.Group in Three.js

Currently, I am tackling the challenge of detecting 3D AABB collisions between a box and a sphere. An interesting observation: when a box is directly added to the scene, collisions are detected successfully. However, when the box is added to a group (THRE ...

javascriptthree.js3dgame-enginegame-physics

How can server-side JavaScript effectively guard against SQL injection attacks?

Interested in finding the most effective methods to prevent SQL injection. Imagine this scenario: the client side (index.html) has a form that sends an array of string values to your server-side page via $.ajax var data_to_be_submitted = { ...

javascriptsqlnode.jscode-injectionhana

Create an Ajax request function to execute a PHP function, for those just starting out

I came across a JS-Jquery file that almost meets my needs. It currently calls a PHP function when a checkbox is clicked, and now I want to add another checkbox that will call a different PHP function. My initial attempt was to copy the existing function a ...

phpjavascriptjqueryajaxwordpress

Generate items above the mesh

I'm currently working on a procedural terrain generation project. I have successfully generated terrain using Perlin noise, and now I want to add procedural grass generation with some specific constraints. My goal is to only generate grass within a c ...

javascriptthree.jsmeshprocedural-generation

"Implementing a Texture as Material in Three.js: Step-by-Step Guide

I recently discovered Three.js and I'm really enjoying it. As a newcomer to JavaScript, I'm eager to delve deeper into animation and related topics. //UPDATE I've been working on this code snippet, but unfortunately, it's not functioni ...

javascripthtmlcanvasthree.js

Finding a way to reference multiple components within a mapping function

In order to set a ref to each project within the map function, I am trying to pass forwardRef from child to parent. At the moment, I am only able to get a single Project. However, I need to set refs to an array list so I can work with it. Below is what I h ...

javascriptreactjstypescript

Display the map using the fancybox feature

I have added fancybox to my view. When I try to open it, I want to display a map on it. Below is the div for fancybox: <div id="markers_map" style="display:none"> <div id="map_screen"> <div class="clear"></div> </div&g ...

javascriptjquerytypescriptfancyboxmapbox

Unable to save and subsequently recover the image

Utilizing the sketchViewModel for editing layers, I follow this particular logic: Upload the basic model; Edit the model; Save the edited model to localStorage; Upload the model from localStorage. However, upon uploading the model from local storage and ...

javascriptarcgis

Guide to removing a Firebase Storage directory using a Firebase Cloud Function?

I'm having trouble finding the deleteFiles() method and the DeleteFilesOptions argument in the Firebase API reference. My IDE is indicating that this method requires an optional argument, but I can't seem to locate any information on this type. I ...

javascriptnode.jsfirebasegoogle-cloud-functionsfirebase-storage

React : understanding the state concept as written like ...state

As I explore React, can you please explain the significance of this piece of code to me? const new_venues = this.state.venues.map((venue) => place_id === venue.place_id ? { ...venue, open : !venue.open } : { ...venue, open: false }); I understand the ...

javascriptreactjs

Learn the secret to displaying and concealing images with jquery!

I'm working on enhancing a question I recently published. After scrolling down the page 200px, the image changes its size. I'm also looking to implement additional functions that I'm struggling to make work. Specifically, I want to achiev ...

javascriptjqueryhtmlcss

Unable to get PrependTo to remove itself when clicked

Below is a custom jQuery script I put together: $(function(){ $("a img").click(function() { $("<div id=\"overlay\"></div>").hide().prependTo("body").fadeIn(100); $("body").css({ ...

javascriptjqueryhtmlxhtml

Access language options in the dropdown menu using keyboard shortcuts

I have a dropdown that appears when the mouse hovers over it: Is there a way to also trigger the dropdown to appear when the user tabs to it? I've tried following this thread for guidance: Selecting div in custom dropdown using Keyboard (Up, down and ...

javascriptjqueryhtmluser-friendly

Retrieve the original jqXHR object from the success callback of the $.ajax function

My original task is as follows: Execute a jQuery.ajax() request. Upon success, perform additional checks on the data received from the server. If these checks fail, reject the promise for further handling. After researching extensively online, I came up ...

javascriptjqueryajaxjsgrid

Setting up Material UI Icons in your React js project

I've been having trouble installing the Material UI Icons package with these commands: npm install @material-ui/icons npm install @material-ui/icons --force npm i @mui/icons-material @mui/material Error messages keep popping up and I can't see ...

javascriptnode.jsreactjsnpmmaterial-ui

Ways to specifically locate the initial list items

Need help creating an array of the first li elements but unsure of how to proceed. Here is the HTML structure: <div class="nav"> <ul> <li>Element 1</li> <li>Element 2 <ul> <li>Element ...

javascripthtmlcssdom

By utilizing // within the source of a <script>, one can efficiently reference external files without specifying the

Curious if anyone has come across any evidence, proof, or firsthand accounts of utilizing the traditional http/https JavaScript <script> hack: <script src="//someserver.com/js/script.js"></script> Have you faced any problems with this m ...

javascripthttpurlhttps