Всплывающее окно для Twitter логин

Я пытаюсь реализовать всплывающее окно для моего проекта RoR для входа в систему для Twitter. В настоящее время, когда вы нажимаете логин, вы перенаправляетесь на страницу авторизации, а затем, как только вы вошли в систему, вы перенаправлены обратно. Я хочу, чтобы всплывающее окно появилось поверх текущего окна браузера, а затем закрылось после аутентификации.Всплывающее окно для Twitter логин

Это мой сессии контроллер:

def create 
auth_hash = request.env['omniauth.auth'] 
@user = User.find_by_user_id(auth_hash["uid"]) 
if @user 
    @authorization = @user.authorization 
    flash.now[:notice] = "Welcome back #{@user.name}! You have already signed up." 
    session[:user_id] = auth_hash["uid"].to_i 
else 
    @user = User.new :name => auth_hash["info"]["name"], :user_name => auth_hash["info"]["nickname"], :user_id => auth_hash["uid"], :profile_image_url => auth_hash["info"]["image"].sub("_normal", "") 
    @user.build_authorization :secret => auth_hash['credentials']['secret'], :token => auth_hash['credentials']['token'] 
    @user.build_preference 
    @user.save! 
    @user.errors.each do |error| 
     puts error 
end 
    flash.now[:notice] = "Hi #{@user.name}! You've signed up." 
    session[:user_id] = auth_hash["uid"].to_i 
end 
    redirect_to :root 
end 

def logout 
session[:user_id] = nil 
redirect_to :root 
end 

def failure 
render :text => "Sorry, but you didn't allow access to our app!" 
end 

def destroy 
@user = current_user 
if @user 
    @user.destroy 
    end 
redirect_to :root 
    end 

end

Я искал вокруг, и я вижу, что Javascript всплывающий есть способ сделать это, так что я получил это от одного из других вопросов StackOverflow:

Turn omniauth facebook login into a popup

Если код всплывающего окна, как показано ниже:

function popupCenter(url, width, height, name) { 
    var left = (screen.width/2)-(width/2); 
    vartop = (screen.height/2)-(height/2); 
    return window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top); 
    } 

    $("a.popup").click(function(e) { 
    popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup"); 
    e.stopPropagation(); return false; 
    });

И я сделал вид обратного вызова, но то, что я не знаю, куда поместить эту строку:

 =link_to "Log in with Facebook", omniauth_authorize_path(:user, :facebook), :class => "popup", :"data-width" => 600, :"data-height" => 400

Класс => Всплывающее линия должна идти туда, где мы устанавливаем ключ Twitter/тайна но я не думаю, что это подходящее место (Omniauth - Display facebook connect as popup). Это не сработало. :/

Любые идеи?

источник

2015-04-02 TheSpiralRing

Это то, что вы хотите?

Helper

Применение:

module ApplicationHelper 
    def link_to_login_with(provider, url, html_options = {}) 
    add_default_class(html_options) 
    convert_popup_attributes(html_options) 

    link_to t('.login_with_link', provider: provider), url, html_options 
    end 

    private 

    def add_default_class(html_options) 
    default_class = "js-popup" 

    if html_options.has_key?(:class) 
     html_options[:class] << " " << default_class 
    else 
     html_options[:class] = default_class 
    end 
    end 

    def convert_popup_attributes(html_options) 
    width = html_options.delete(:width) 
    height = html_options.delete(:height) 

    if width && height 
     html_options[:data] ||= {} 
     html_options[:data].merge!({width: width, height: height}) 
    end 
    end 
end

Application.html.erb

<!DOCTYPE html> 
<html> 
<head> 
    <title>Omniauth Popup</title> 
    <%= stylesheet_link_tag 'application' %> 
    <%= javascript_include_tag 'application' %> 
    <%= csrf_meta_tags %> 
</head> 
<body> 
    <header class='main'> 
    <nav class='user-nav'> 
     <ul> 
     <% if current_user %> 
      <li> 
      <%= link_to current_user do %> 
       <%= image_tag current_user.image, class: 'user-pic' if current_user.image %> 
       <%= content_tag :span, current_user.name %> 
      <% end %> 
      </li> 
      <li><%= link_to t('.logout_link'), sign_out_path %></li> 
     <% else %> 
      <li><%= link_to_login_with 'Facebook', '/auth/facebook', { width: '460', height: '460' } %></li> 
      <li><%= link_to_login_with 'GitHub', '/auth/github', { width: '1050', height: '700' } %></li> 
      <li><%= link_to_login_with 'Google', '/auth/google', { width: '800', height: '470' } %></li> 
      <li><%= link_to_login_with 'Twitter', "/auth/twitter?lang=#{I18n.locale}", { width: '660', height: '710' } %></li> 
     <% end %> 
     </ul> 
    </nav> 
    </header> 

    <div id='js-messages' class='messages'> 
    <% flash.each do |type, message| %> 
     <span class='message <%= type %>'> 
     <%= message %> 
     </span> 
    <% end %> 
    </div> 

    <div class='content'> 
    <%= yield %> 
    </div> 
</body> 
</html>

приложение/активы/JavaScripts/login.js

$(document).ready(function() { 
    $('.js-popup').click(function() { 
     centerPopup($(this).attr('href'), $(this).attr('data-width'), $(this).attr('data-height')); 
     return false; 
    }); 
}); 

function centerPopup(linkUrl, width, height) { 
    var sep = (linkUrl.indexOf('?') !== -1) ? '&' : '?', 
     url = linkUrl + sep + 'popup=true', 
     left = (screen.width - width)/2 - 16, 
     top = (screen.height - height)/2 - 50, 
     windowFeatures = 'menubar=no,toolbar=no,status=no,width=' + width + 
      ',height=' + height + ',left=' + left + ',top=' + top; 
    return window.open(url, 'authPopup', windowFeatures); 
}

Контроллер

class SessionsController < ApplicationController 
    def create 
    # Have a look at the info returned by the provider by uncommenting the next line: 
    # render text: "<pre>" + env["omniauth.auth"].to_yaml and return 
    omniauth = env['omniauth.auth'] 
    user = User.find_or_create_with_omniauth(omniauth) 
    session[:user_id] = user.id 
    flash[:notice] = t('controllers.sessions.create', provider: pretty_name(omniauth.provider)) 
    render_or_redirect 
    end 

    def failure 
    flash[:alert] = t('controllers.sessions.failure', provider: pretty_name(env['omniauth.error.strategy'].name)) 
    render_or_redirect 
    end 

    def destroy 
    session[:user_id] = nil 
    redirect_to root_url, notice: t('controllers.sessions.destroy') 
    end 

    protected 

    def render_or_redirect 
    page = env['omniauth.origin'] 
    if env['omniauth.params']['popup'] 
     @page = page 
     render 'callback', layout: false 
    else 
     redirect_to page 
    end 
    end 

    def pretty_name(provider_name) 
    provider_name.titleize 
    end 
end

приложение/views/sessions/callback.html.erb

<%= javascript_tag do %> 
    window.opener.location = '<%= @page %>'; 
    window.close(); 
<% end %>

источник

2015-04-02 09:21:08

Всплывающее окно для Twitter логин

ответ

Смежные вопросы