angular.js - Is there a better solution for angular oauth for domestic social gaming sites?

Question

The first step of Sina's oauth will guide the user to open a page, and then the url will redirect to the root directory of the website after the user allows it. The problem is as follows:

Question 1

The url will have a code parameter, and the link will become XXX.XXX.com/?code=XXXX. When htmlMode # $locationProvider.html5Mode(false) is not used, the route will jump to XXX.XXX.com/? code=XXXX#/

Is there a good way to get the value of this code (currently using $window.location.search, because $location.search cannot get this value in this mode);

Is there a good way to remove this XXX.XXX.com/?code=XXXX#/ ?code=XXX (if not removed, every route jump link will be there)
My temporary solution to the above two problems is to replace $window.location.href, which will cause the entire page to refresh (fortunately, it is the homepage login,
It’s acceptable, but I feel like there should be more advanced and angularinic usage)

Test address http://llovebaimuda.herokuapp.com/ http://llovebaimuda.herokuapp.com/#/login#/login

Html5mode is not used because if you directly enter the url (for example: http://llovebaimuda.herokuapp.com/phone)会导致404,输入phone), it will cause 404. Enter
http://llovebaimuda.herokuapp.com/#/phone虽然浏览器显示http://llovebaimuda.herokuapp.com/phone，但是#/phone. Although the browser displays
phone, but

When copying the url to a friend, it will get a 404 unless #/ is added. Is there any good solution to this problem in angular and the backend

Question 2

Is there a way for angular to use <script></script> directly in the page? For example, the Sina Weibo login component is a js, which will be loaded on the page
Then do some processing on a dom. Angular's operation on the dom is in the directive, and then compiled and linked. In short, it is Sina's login js widget

It doesn't work, or does Angular require special processing.

Question 3

https://oauth.io/这个木有微博啊There is no relatively mature and reusable OAuth in Angular (China’s such as Sina Weibo, QQ, Douban),

oauth requires the following steps:
1. Guide users to authorize and obtain codeaccess_token 2. Actively initiate a request to the oauth website and obtain
access_token This step should be transparent to the user. Now my idea is to let the page actively jump to a page with authService. This authService actively obtains the data needed, and then saves

and user to $routeScope( Is there any localstorage similar to backbone?), this operation will jump to the next page regardless of whether it is successful or not. This is the page that can only be seen after successful login

if 'code' of param_dict
    $window.location.href = href + '#' + DEFAULT_URL

Test code from oauth to the first step<🎜>

'use strict'https://oauth.io/

STATIC_URL = '/static'
DEFAULT_URL = '/phones'

phonecatApp = angular.module('phonecatApp', [
  'ngRoute'
  'ConfigServices'
  'phonecatControllers'
  'authControllers'
  'phonecatServices'
  'phonecatFilters'
  'phonecatAnimations'
])

phonecatApp.config([
  '$routeProvider'
  '$locationProvider'

($routeProvider, $locationProvider, config) ->

  $routeProvider
    .when('/',{})

    .when('/login',{
      templateUrl: STATIC_URL + '/partials/auth/login.html'
      controller: 'LoginCtrl'
    })
    .when('/auth/:code',{
    })

    .when('/phones', {
      templateUrl: STATIC_URL + '/partials/phone/list.html'
      controller: 'PhoneListCtrl'
    })

    .when('/phones/:phoneId', {
      templateUrl: STATIC_URL + '/partials/phone/detail.html'
      controller: 'PhoneDetailCtrl'
    })

    # Catch all
    .otherwise({redirectTo: 'DEFAULT_URL'})

  # Without server side support html5 must be disabled.
  $locationProvider.html5Mode(false)

])

parse_query_dict = (query) ->
  query = query.trim()
  if query.length <= 1
    return {}
  query = query.substring(1)
  query_dict = {}
  list = query.split('&')
  for q in list
    k_v = q.split('=')
    query_dict[k_v[0]] = k_v[1]
  return query_dict

phonecatApp.run([
  '$rootScope'
  '$route'
  '$location'
  '$window'
  ($rootScope, $route, $location, $window) ->
    $rootScope.$on('$locationChangeStart', (event, next, current) ->
      if not $rootScope.user
        if $location.path() == '/'
          params = $window.location.search
          if params
            href = $window.location.href
            href = href.replace(params,'')
            param_dict = parse_query_dict(params)
            if 'code' of param_dict
              $window.location.href = href + '#' + DEFAULT_URL
        # no logged user, we should be going to #login
        if next.templateUrl == "partials/login.html"
        #  already going to #login, no redirect needed
        else
        # not going to #login, we should redirect now
        #$location.path "/login"
    )
])

Answer 1

Let me answer the first question:

To remove ?code=XXX, using location.href will definitely refresh the page. Use window.pushState instead.
Reference: MDN: Manipulate browser history

Answer 2

angularjs Sina Weibo cross-domain solution

问题：oauth跨域
angularjs jsonp只能是get方式，而http.post和resouce oauth时都会引发跨域问题

解决办法，让跨域变成非跨域
跨域是前端问题，javascript访问非本域的东西的时候会有这个问题，因此后端实现
oauth然后让前端访问本域内的地址就可以解决这个问题。

方法有下面：
   1.后端服务器做个代理(公司牛人给的解决方案，具体怎么样实现没有深入研究) 
   2.使用新浪的sdk，后端解决oauth, <a href="/oauth2/sina/authorize">
     http://open.weibo.com/wiki/SDK(新浪) 
     http://michaelliao.github.io/sinaweibopy/(python sdk)
     https://github.com/tianyu0915/django-sina-login(python sdk 例子)