I am trying to build a React Native app using expo and firebase authentication. The email/password authentication is working fine but the phone number authentication is failing because of the applicationVerifier.
I have tried to use 'react-native-firebase' but that is also not working and giving error.
[Error: RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment with DOM support.]
Thanks.
You need to make .html file and put this code..
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Entering captcha</title>
</head>
<body>
<p style="text-align: center; font-size: 1.2em;">Please, enter captcha for continue<p/>
<button id="continue-btn" style="display:none">Continue to app</button>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyCy6HyqIV5Q_A5lllIxZgePSmKq-Q8eqiw",
authDomain: "onsignledemo.firebaseapp.com",
databaseURL: "https://onsignledemo.firebaseio.com",
projectId: "onsignledemo",
storageBucket: "onsignledemo.appspot.com",
messagingSenderId: "223114260821"
};
firebase.initializeApp(config);
</script> <script>
function getToken(callback) {
var container = document.createElement('div');
container.id = 'captcha';
document.body.appendChild(container);
var captcha = new firebase.auth.RecaptchaVerifier('captcha', {
'size': 'normal',
'callback': function(token) {
callback(token);
},
'expired-callback': function() {
callback('');
}
});
captcha.render().then(function() {
captcha.verify();
});
}
function sendTokenToApp(token) {
var baseUri = decodeURIComponent(location.search.replace(/^\?appurl\=/, ''));
const finalUrl = location.href = baseUri + '/?token=' + encodeURIComponent(token);
const continueBtn = document.querySelector('#continue-btn');
console.log(finalUrl);
// continueBtn.onclick = (event)=>{
// window.open(finalUrl,'_blank')
// }
continueBtn.style.display = "block";
}
document.addEventListener('DOMContentLoaded', function() {
getToken(sendTokenToApp);
});
</script>
</body>
</html>
and put this file in to your running server and load your URL in to react- native Webview before sending confirmation code and after verify this CAPTCHA send confirmation code...
Related
I am new to forntend development in general and Vuejs specifically i am trying to add Xing login button plugin to my website which is build with Vuejs but the code provided from Xing is to be used in just Java script how can use these code in vuejs:
<script type="xing/login">
{
"consumer_key": "random key"
}
</script>
<script>(function(d) {
var js, id='lwx';
if (d.getElementById(id)) return;
js = d.createElement('script'); js.id = id; js.src = "https://www.xing-
share.com/plugins/login_plugin.js";
d.getElementsByTagName('head')[0].appendChild(js)
}(document));
</script>
i have tried to put it in the created function and directly in the html part of the page but did not work.
Thank you very much in advanced.
Update 1 :
this is a full example how it should work when using only js:
<!DOCTYPE html>
<html>
<head>
<title>Login with XING plugin Example</title>
<meta charset="UTF-8">
<script>
// This function is called by the plugin after
// the login flow is completed.
function onXingAuthLogin(response) {
var output;
console.log(response);
if (response.user) {
output = 'Successful login for ' + response.user.display_name;
} else if (response.error) {
output = 'Error: ' + response.error;
}
document.getElementById('output').innerHTML = output;
}
</script>
</head>
<body>
<!-- Place the plugin script -->
<script type="xing/login">
{
"consumer_key": "[YOUR_CONSUMER_KEY]"
}
</script>
<p id="output">No user logged in.</p>
<!-- Include the plugin library -->
<script>(function(d) {
var js, id='lwx';
if (d.getElementById(id)) return;
js = d.createElement('script'); js.id = id; js.src = "https://www.xing-share.com/plugins/login_plugin.js";
d.getElementsByTagName('head')[0].appendChild(js)
}(document));</script>
</body>
</html>
i managed to render the button by injecting the elements to the head in mounted function:
mounted() {
const onXingAuthLogin = document.createElement('script');
onXingAuthLogin.innerText = ' function onXingAuthLogin(response) { ' +
'if (response.user) { ' +
'console.log(response.user) ' +
'} else if (response.error) { ' +
'console.log(response.error); response.error; ' +
' } ' +
'};'
document.head.appendChild(onXingAuthLogin);
const scriptTag = document.createElement('script');
scriptTag.setAttribute('type', 'xing/login')
scriptTag.innerText = '{"consumer_key": "Your Key"}';
document.getElementById('xing').appendChild(scriptTag);
const scriptFunction = document.createElement('script');
scriptFunction.innerText = '(function(d) {' +
' var js, id=\'lwx\';' +
' if (d.getElementById(id)) return;' +
' js = d.createElement(\'script\'); js.id = id; js.src = "https://www.xing-share.com/plugins/login_plugin.js";' +
' d.getElementsByTagName(\'head\')[0].appendChild(js)' +
' }(document));';
document.getElementById('xing').appendChild(scriptFunction);
},
i am not sure if this approach is good in vuejs, i am trying now to retrive the response in vuejs
Today I encountered the same problem as you, below you will find my solution:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
<script>
function onXingAuthLogin(response) {
const xingResponseEvent = new CustomEvent("xingResponseEvent", {detail: response});
window.dispatchEvent(xingResponseEvent)
}
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script src="https://www.xing-share.com/plugins/login_plugin.js"></script>
</body>
</html>
When you log in via the Xing button, the function onXingAuthLogin is executed. In this function I created a CustomEvent and dispached it. The payload is the response from Xing.
App.vue
<script setup lang="ts">
import { ref } from 'vue';
const user = ref(null);
window.addEventListener('xingResponseEvent', ((event: CustomEvent) => {
user.value = event.detail;
}) as EventListener);
</script>
<template>
<component v-if="!user" is="script" type="xing/login">
{
"consumer_key": "72be9bbb4ba8fcb5af86"
}
</component>
<pre v-else><code>{{user}}</code></pre>
</template>
<style scoped></style>
In App.vue I have attached an eventListener to the window, which listens for the new event. When the event is recognized, the user variable is filled based on the event payload and displayed in the template.
I'm trying to use jsPDF with Vue but I get a ReferenceError: jsPDF is not defined. See the snippet :
let jsPrint = () => {
const doc = new jsPDF()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<button onclick="jsPrint()">
print
</button>
The script is linked in the head tag :
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $site->title() ?> - <?= $page->title() ?></title>
<link rel="stylesheet" href="<?= url('assets') ?>/css/style.css">
<!--========== JSPDF ==========-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<!--========== VUE ==========-->
<!-- development version, includes helpful console warnings -->
<script src="<?= url('assets') ?>/js/libs/vue.js"></script>
<script src="<?= url('assets') ?>/js/app.js" type="module" defer></script>
</head>
Then in a component, I have a method that should be triggered on click on a button :
exportSimple: function() {
const doc = new jsPDF()
// const target = document.querySelector('#dialog-export-content')
// doc.html(target, {
// callback: function(doc) {
// doc.save()
// },
// x: 10,
// y: 10
// })
}
But i throws an error.
I tried alternative methods to link the library : local, npm, other sources like jspdf.es.min.js. Nothing works.
Any idea ?
Using CDN the jsPDF object is available as property of jspdf which is available globally :
const { jsPDF } = jspdf
let print = () => {
const doc = new jsPDF()
}
I keep getting an error while trying to use the Javascript SDK for a simple login flow. I must be doing something wrong, but cannot figure it out. I'm just trying to redirect a user after they accept the app.
Here is what is happening:
User clicks login button, the app dialogue appears (with correct permissions). They approve the app, then the popup hangs on a blank page with this url: https://www.facebook.com/dialog/permissions.request.
However, the app is approved, and if I click out of the dialogue and click the login button again, i am correctly redirected, and the app is installed.
Here is my code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/functions.js" type="text/javascript">
</script>
<link type="text/css" href="style/style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
</head>
<body>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'my_app_id', // App ID
// Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
$('.submit_button').attr("href","gameurll").removeAttr("onClick");
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Facebook Login Function
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
window.location = "gameurl";
} else {
// cancelled
}
}, {scope:"publish_actions,email,user_relationship_details"});
}
</script>
<a class="submit_button" href="" onclick="login();" >Login</a>
</body>
</html>
Thanks in advance for your help
I would like to use html2canvas but it is not clear enough how to use it in the documentation. What libraries I should include ? and then is this peace of code just what I need ? What about the proxy ? and How I could save the screen shot after it's taken ?
$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL()
window.open(img);
For me, it was working this way:
$('#map').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL()
window.open(img);
}
The current latest version works this way:
html2canvas($('#map'),
{
onrendered: function(canvas) {
cvs = canvas.toDataURL('image/png');
window.open(cvs)
}
});
Here's a minimal, complete example that shows how to convert the DOM to canvas with html2canvas, convert the canvas to base64, and finally trigger a download.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
<script>
(async () => {
const canvas = await html2canvas(document.body);
const base64 = canvas.toDataURL();
const a = document.createElement("a");
a.href = base64;
a.download = "html2canvas-test.png";
a.click();
})();
</script>
</body>
</html>
I'm not sure what you mean about a proxy.
The dojo api doesn't seem to load on my system (IE 8, Windows 7 with IIS 7.5). I try to test these examples by linking to the dojo api like this
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
I also downloaded the library to link to it directly like this.
<script type="text/javascript" src="dojo.js">/*_*/</script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
But got the same result. The library scripts don't load the treeview. Are there issues with IE8, Windows 7 or IIS 7.5 for the dojo libary 1.6.1?
Do you know of a treeview with this functionality: MySQL database support, context menu, add/delete node, hyperlink in tree support?
Thanks.
Complete HTML file where the dojo api doesn't load.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.addOnLoad() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
}
</script>
<script type="text/javascript">
var treeDat = {
treeNodes: [
{ title:"World" },
{ title:"Business",
children:[
{ title:"News",
children:[
{ title:"Main"},
{ title:"Company News" },
{ title:"Economy" }
]
},
{ title:"Markets" },
{ title:"Technology" },
{ title:"Jobs and Economy" }
]
},
{ title:"Sports" }
]
};
</script>
<script type="text/javascript">
var TreeBuilder = {
buildTreeNodes:function (dataObjs, treeParentNode){
for(var i=0; i<dataObjs.length;i++){
var node = dojo.widget.createWidget("TreeNode",{
title:dataObjs[i].title,
expandLevel:99,
widgetId:(((treeParentNode)?treeParentNode.widgetId:"root_")+"_"+i)
});
treeParentNode.addChild(node);
treeParentNode.registerChild(node,i);
if(dataObjs[i].children){
this.buildTreeNodes(dataObjs[i].children, node);
}
}
},
buildTree:function (){
var myTreeWidget = dojo.widget.createWidget("Tree",{
widgetId:"myTreeWidget",
DNDMode:"between",
DNDAcceptTypes:["myTreeWidget"]
});
this.buildTreeNodes(treeDat.treeNodes,myTreeWidget);
var treeContainer = document.getElementById("myWidgetContainer");
var placeHolder = document.getElementById("treePlaceHolder");
treeContainer.replaceChild(myTreeWidget.domNode,placeHolder);
}
}
function addTreeContextMenu(){
var djWdgt = dojo.widget;
var ctxMenu = djWdgt.createWidget("TreeContextMenu",{});
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Add Child Menu Item"}));
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Delete This Menu Item"}));
document.body.appendChild(ctxMenu.domNode);
var myTree = dojo.widget.manager.getWidgetById("myTreeWidget");
/* Bind the context menu to the tree */
ctxMenu.listenTree(myTree);
}
dojo.addOnLoad(function(){
TreeBuilder.buildTree();
addTreeContextMenu();
});
</script>
</head>
<body>
<h1>Programmatic Dojo Tree Demo</h1>
<hr />
<div id="myWidgetContainer"
style="width: 17em; border: solid #888 1px; height:300px;">
<span id="treePlaceHolder"
style="background-color:#F00; color:#FFF;">
Loading tree widget...
</span>
</div>
</body>
</html>
You need to wrap the dojo.require calls in the dojo.addOnLoad function. This is required when using Dojo cross-domain build.
See more at http://dojotoolkit.org/reference-guide/quickstart/cross-domain.html
dojo.addOnLoad(function() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
});