In Vue 2, I'm implementing Github Social Registration and login with my app.
In my Register.vue, I have button click that would lead to Github
<button class="btn github" #click="registerWithGithub()"><i class="fab fa-github fa-fw"></i> Register with Github</button>
registerWithGithub() method would look like this
registerWithGithub () {
window.location.href = `https://github.com/login/oauth/authorize?scope=user:email&client_id=${this.githubClientId}`
}
and I have configured a route to get callback from Github?
How do we manage those callbacks in Vue?
I have created a view component called GithubCallback.vue
and my route would look like
{
name: 'githubCallback',
path: '/auth/github',
component: GithubCallback
},
<template>
<div>callback</div>
</template>
<script>
export default {
name: 'githubCallback',
mounted() {
}
}
</script>
However, clueless on how to handle callback response returned from Github.
Try vue-authenticate plug-in. It helped me solve the same problem with Facebook
Related
I'm loading the Paypal smart button into a vue component. I've tried loading the external Paypal js script, which appears to create a paypal object.
However when trying to access the paypal object, I get this error:
found in
---> <PaypalButton> at resources/assets/js/components/PaypalButton.vue
<Root>
After the page is loaded, I can successfully console.log(paypal) in chrome dev tools console window, and I can also successfully create a button in vue to also access it, but it does not appear to be able to referenced in the mounted hook.
Here is the code:
<template>
<div class="paypal-button-wrapper">
<div id="paypal-button-container"></div>
<button #click="showPaypal">Clicking this successfully renders the button</button>
</div>
</template>
<script>
export default {
data: () => ({
}),
mounted: function () {
let paypalScript = document.createElement('script');
paypalScript.setAttribute('src', 'https://www.paypal.com/sdk/js?client-id=AUo4kSgRdH44poEYLQwPdqM24oN8nQc4Jm1HAkWs5vQTAMGu-BBlpfN4xnMDEzSGfj4wjwOy6eLtNKyv¤cy=USD');
document.head.appendChild(paypalScript);
this.showPaypal(); // fails to render the paypal button, with reference error
},
methods: {
showPaypal: function() {
paypal.Buttons().render('#paypal-button-container');
}
}
};
</script>
The solution is to use paypalScript.onload. I'm not sure if this is the most direct method, but it does work.
mounted: function () {
let paypalScript = document.createElement('script');
paypalScript.setAttribute('src', 'https://www.paypal.com/sdk/js?client-id=SB_ID¤cy=USD');
document.head.appendChild(paypalScript);
var that = this;
paypalScript.onload = function () {
that.showPaypal();
};
},
Reference: Run the method of the Vue component after the external script is loaded
I need to implement URL sharing on Facebook via javascript, sharing also a picture.
When the FB sharing dialog appears, it starts shrinking itself and keeps shrinking more and more until it becomes about 20 pixels wide.
And it happens using either the share_open_graph or "share" method.
Also, on the JS console i see this error when the sharing dialog appears:
ErrorUtils caught an error: "<![EX[["Could not find element \"%s\"%s
from module \"%s\"","u_0_18","","__el...".
Subsequent errors won't be logged; see https://fburl.com/debugjs.
This is my code:
<script>
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId: '476337039102253',
version: 'v2.8'
});
FB.getLoginStatus(APP.fbUpdateStatusCallback);
});
});
</script>
<button id="itb" class="btn btn-primary btn-large active_down" name="btn" onclick="
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': 'https://example.com',
'og:title': 'page title',
'og:description': 'desc',
'og:image': 'https://savebybooking.s3.amazonaws.com/public/prd/File_341'
}
})
}, function(response){
if (response && !response.error_message) {
console.log('fb sharing OK: '+JSON.stringify(response));
} else {
console.log('Not OK: '+JSON.stringify(response));
}
}); return false;" type="submit">Share</button>
Are you having the same issue? Why is it happening?
I used the "share" method until yesterday without problems, this issue appeared today with no modification to my code.
p.s. I prefer
using share_open_graph
rather than
share
method because the latter won't let you share the specified picture but seems to pick a random image from the url you are sharing.
This is the error inside of the FB dialog, not inside the page launching the dialog. Also it's because you're missing the meta tags on the page you're sharing. Nothing for FB to scrape for your share.
I am completely new to Angularjs and haven’t been doing any code for ages. I started setting up my website again with Angularjs. I have a main page and an about page, to which the user gets via ngRoute on ng-click (or hitting space). Once on the about page, the user can go back by clicking somewhere on the page and so on.
App.js
var app = angular.module("MyApp", ["ngRoute"]);
app.config(function($locationProvider, $routeProvider) {
$routeProvider
.when("/teaser", {
controller:"teaserCtrl",
templateUrl:'teaser.html'
})
.when("/about", {
controller:"aboutCtrl",
templateUrl: "about.html"
})
.otherwise({
redirectTo:"/teaser"
})
});
app.controller("mainCtrl", function($scope, $http, $location) {
$scope.v = {
inverted: false,
display: true,
offwhite: true,
}
$scope.$on("space", function() {
if ($scope.v.teaser) {
$location.path("/about")
$scope.v.teaser = false
} else {
$location.path("/teaser")
$scope.v.teaser = true
}
$scope.$apply()
})
$scope.goHome = function(){
$scope.$broadcast("goHome")
}
});
app.directive("ngMobileClick", [function () {
return function (scope, clickElement, attrs) {
clickElement.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply(attrs["ngMobileClick"]);
});
}
}])
HTML
<body ng-controller="mainCtrl as main" ng-mobile-click="goHome()" ng-class="{inverted: v.inverted, bg: v.offwhite}" space>
<div class="content" ng-view ng-hide="v.display"></div>
//My body code
<script ng-init="sw = 'some website'; id="about.html" type="text/ng-template">
<div class="about">
<p class="text" ng-click="next(); $event.stopPropagation()">
<p>some text</p>
<br>
<a ng-href="{{mail}}" ng-click="$event.stopPropagation()">some address</a>
</p>
</div>
</script>
</body>
The code for the about page is written into a script and it has hyperlinks (ng-href). Now my issue: As you can see, I changed my ng-click to ng-mobile-click for the body-section. If I also change it in the script for the hyperlinks, something weird is happening which I can’t really figure out (links change to hover color, but still no redirection to the ng-href.
For the desktop version, the click is triggering ngRoute, but I can also click the links. For the mobile version this is not possible any more. Any ideas how I can fix this? I know, there is no hovering possible, but somehow I need to detect the hyperlinks also on mobile devices without being redirected to the main-page.
As I said: this is my first try with Angularjs and I haven’t done any code for a while, please be as clear as possible!
There is another controller for teaser/about which I haven’t put here, as well as the directive for the keyup.
Any ideas or suggestions? Thank you so much in advance!
My problem is simple, everything in this code works as expected except that everytime, I click on login button, I get redirected to '/'. I do not want that. I want the user to stay on login page until they finish authenticating via facebook/persona/twitter and then get redirected to '/content'.
Here is my router/app/controllers:
var app = angular.module("myapp", ["ngRoute","firebase"]);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'landing.html',
});
$routeProvider.when('/login',{
templateUrl: 'login.html',
controller: 'controller'
});
$routeProvider.when('/content',{
authRequired: true,
templateUrl: 'content.html',
controller: 'MyController'
});
$routeProvider.otherwise({redirectTo: '/'});
}]);
app.controller('MyController',['$scope', '$firebase','$firebaseAuth',function($scope,$firebase,$firebaseAuth) {
var ref = new Firebase("https://mybase.firebaseio.com/");
$scope.auth = $firebaseAuth(ref,{path: '/'});
$scope.messages = $firebase(ref);
$scope.addMessage = function(e) {
if (e.keyCode != 13) return;
$scope.messages.$add({from: $scope.name, body: $scope.msg});
$scope.msg = "";
};
}]);
app.controller('controller',['$scope','$firebaseAuth',function($scope, $firebaseAuth) {
var ref = new Firebase('https://mybase.firebaseio.com/');
$scope.auth = $firebaseAuth(ref);
}]);
This (my preferred solution) didnt work either:
.controller('LoginCtrl',['$scope','$firebase','$firebaseAuth','$location',function($scope,$firebase,$firebaseAuth,$location, waitForAuth){
var ref = new Firebase('https://myfirebase.firebaseio.com/');
$scope.auth = $firebaseAuth(ref,{path: '/'});
waitForAuth.then(function(user){
$location.path('/content');
})
}])
My div/button looks as follows (I also have similar one but with 'persona'.):
<div ng-controller="controller">
<div class="facebook-login">
<span><i class="fa fa-facebook-square fa-lg"></i> LogIn with Facebook</span>
</div>
<div class="facebook-login">
<span><i class="fa fa-facebook-square fa-lg"></i> LogIn with Persona</span>
</div>
</div>
I have included the following in my html:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdn.firebase.com/v0/firebase-simple-login.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
<script src="//code.angularjs.org/1.2.6/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/module.waitForAuth.js"></script>
<script src="//login.persona.org/include.js"></script>
<script src="app.js"></script>
I have enabled facebook login and persona login in my firebase forge. Also I have added my facebook app id and secret too. Everytime I click on the login button I get redirected to '/'. waitforAuth I use is here: https://gist.github.com/katowulf/7328023, but if I use it in my controllers, login with facebook/persona buttons do not work at all. If I use waitForAuth, everytime I click on one of the login buttons I get redirected to '/' immediately instead of login popup.
Anyone? :)
I finally found the solution to my problem. Adding the following stops automatic redirect to '/' before login even takes place:
I just needed to add this:
$scope.$on('$locationChangeStart', function(event) {
event.preventDefault();
});
In here like this:
app.controller('controller',['$scope','$firebaseAuth','$location','$rootScope',function($scope, $firebaseAuth,$location,$rootScope) {
$scope.$on('$locationChangeStart', function(event) {
event.preventDefault();
});
var ref = new Firebase('https://mybase.firebaseio.com/');
$scope.auth = $firebaseAuth(ref);
$rootScope.$on('$firebaseAuth:login', function(){
$location.path('/content');
});
}]);
However, I ran into another problem, because this now doesnt work:
$rootScope.$on('$firebaseAuth:login', function(){
$location.path('/content');
Because after user is finished authenticating they should be redirected to /content (instead of being stuck at login page with login buttons disappearing due to ng-hide (See above)), but it does not matter what I try $location.path('/content') doesnt work.
I tried this:
waitForAuth.then(function(){
console.log('test');
$location.path('/content');
})
But console.log prints out "test" in the console way before user is authenticated, so waitForAuth doesnt seem to work either :/. Somehow waitForAuth fires console.log but it doesnt fire $location.path... Odd.
I even tried doing this (both with waitForAuth and $rootScope.$on:
waitForAuth.then(function(){
console.log('test');
$location.path('/content');
$scope.$apply();
})
But I just get an error that angular $digest is already in progress.
Adding this: ng-click="auth.$login('facebook'); return false;" like that, angular throws me this error :
Error: [$parse:syntax] Syntax Error: Token 'false' is an unexpected token at column 33 of the expression [auth.$login('facebook'); return false;] starting at [false;].
And login buttons become un-clickable... :(
Ohh dear... me :)
I had the same problem where the URL was always reverting back to the homepage. The problem was caused by a simple mistake in the html syntax:
Log out
After I removed # in the href attribute the problem was resolved. Hope this helps others who may experience a similar problem.
I have added facebook share button to my webpage using this code:
<a name='fb_share' border="0">Share</a>
<script type='text/javascript' src='jquery.js'>
</script>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script>
The above code shares the current webpage properly but when I included a session check at the start of the webpage where I redirect the user to the login page if valid session doesn't exist the above code always shares the login page instead of the current page. I am using PHP header function for redirect. Please advice.
To share content from not publicly accessible page use Feed Dialog
i use {} you can uncomment features as needed. Keep in mind all share button features where deprecated for the like / recommend button.
<div id="msg"></div>
<script>
function feedthis() {
var obj = {
method: 'feed',
//to: ''+tobe+''
//link: 'https://developers.facebook.com/docs/reference/dialogs/',
//picture: ''+pic+'',
// name: 'Facebook Dialogs',
//caption: 'Reference Documentation',
//description: ''+msg+''
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>