Opera Mini social login issue with loginradius.com

934 Views Asked by At

We are working on a react application(voot.com) and it is live for mobile.

Live url: https://m-origin.voot.com

We are facing many issues with opera mini and one of them is:

We are not able to social login by using loginradius.com. When we click on 'continue with facebook', app redirects to loginradius.com which is third party. But we din't get any response to our server from loginradius that's why user is not logged in by social login.

We are using a js file for loginradius coming from http://cdn.loginradius.com/hub/prod/js/CustomInterface.2.js.

We have written a callback funtion expecting from loginradius to return to that callback. But that callback function is not calling in opera mini browser rest browsers are working fine.

1

There are 1 best solutions below

1
Govind Malviya On

Look like opera mini open popup (as new tab because of mobile browser). My recommendation is not to open the new window in case of mobile devices. follow steps to fix this problem

1.Add this template to your page

<script id="loginradiuscustom_tmpl_mobile" type="text/html"><div class="<%=Name%>">
<a class="anchor_<%=Name%>" href="javascript:void()" onclick="window.location.href = '<%=Endpoint%>&same_window=1&callback=<%=createCurrentRoute(window.location.href)%>'">
<span class="icon-image-<%=Name%>" ></span>
<span class="<%=Name%>-text">Continue with <%=Name%></span>
</a>
</div></script>

2.Add this method to detect mobile devices

function detectmob() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}

3.replace the following line

options.templatename = "loginradiuscustom_tmpl";

with

if(detectmob()){
    options.templatename = "loginradiuscustom_tmpl_mobile";
}else{
    options.templatename = "loginradiuscustom_tmpl";
}